The Cubitt Raycast Extension provides fast, keyboard-first access to the entire Cubitt design system. Search components, browse icons, copy colour tokens, and grab code snippets without leaving your workflow.

## Installation [#installation]

<Steps>
  <Step>
    ### Install Raycast [#install-raycast]

    If you haven't already, [download Raycast](https://raycast.com) for macOS.
  </Step>

  <Step>
    ### Install the Extension [#install-the-extension]

    Install the private Cubitt extension from the [Raycast store.](https://www.raycast.com/tilt-legal/cubitt)

    <Callout type="info">
      You must be a member of the Tilt Legal organisation in Raycast to access this private extension.
    </Callout>
  </Step>

  <Step>
    ### Configure (Optional) [#configure-optional]

    You can customize the extension behavior in Raycast preferences:

    * **Icons Primary Action**: Set default action for icon selection (copy/paste component or import)
    * **Logos Primary Action**: Set default action for logo selection (copy PNG/SVG or component)
    * **Docs Base URL**: Override the documentation URL (useful for local development)
  </Step>
</Steps>

***

## Components [#components]

Search and browse all Cubitt components with instant access to documentation and ready-to-use code examples.

<img alt="Components Command" src="__img0" />

* **Search & Browse**: Quickly find components by name with fuzzy search
* **Documentation Access**: Open component docs directly from Raycast
* **Status Indicators**: See component status (stable, beta, deprecated) at a glance
* **Favorites**: Pin frequently used components for quick access
* **Smart Caching**: Daily cache updates with manual refresh option

***

## Icons [#icons]

Browse over 7,000 icons across UI, MIME, Display, Brands, and Tools sets with instant copy-paste functionality for components and imports.

<img alt="Icons Command" src="__img1" />

* **7,000+ Icons**: Browse UI, MIME, Display, Brands, and Tools icon sets
* **Theme-Aware**: UI icons automatically tint to match your Raycast theme
* **Instant Copy**: Copy JSX components or import statements with one keystroke
* **Multiple Actions**: Choose to copy component, paste component, copy import, or paste import

***

## Colours [#colours]

Browse and copy Cubitt colour tokens in multiple formats. Switch between light and dark themes to preview how tokens look in each mode.

<img alt="Colours Command" src="__img2" />

* **All Tokens**: Foreground, background, surface, border, and semantic colour tokens
* **Brand Colours**: Tilt Legal and Mobius brand tokens
* **Multiple Formats**: Copy as Hex, OKLCH, HSL, or RGB
* **Developer Shortcuts**: Copy CSS variables or Tailwind class names
* **Light/Dark Toggle**: Preview tokens in light, dark, or auto (system) mode

***

## Logos [#logos]

Access Cubitt and Tilt brand logos in multiple formats — copy as SVG, PNG, or paste React components directly into your code.

<img alt="Logos Command" src="__img3" />

* **Brand Assets**: Access all Cubitt and Tilt brand logos
* **Multiple Formats**: Copy as SVG, PNG, or React component
* **Quick Paste**: Paste components directly into your editor