Raycast Extension
Browse Cubitt components, icons, logos, and colour tokens directly from Raycast
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
Install Raycast
If you haven't already, download Raycast for macOS.
Install the Extension
Install the private Cubitt extension from the Raycast store.
You must be a member of the Tilt Legal organisation in Raycast to access this private extension.
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)
Components
Search and browse all Cubitt components with instant access to documentation and ready-to-use code examples.
- 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
Browse over 7,000 icons across UI, MIME, Display, Brands, and Tools sets with instant copy-paste functionality for components and imports.
- 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
Browse and copy Cubitt colour tokens in multiple formats. Switch between light and dark themes to preview how tokens look in each mode.
- 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
Access Cubitt and Tilt brand logos in multiple formats — copy as SVG, PNG, or paste React components directly into your code.
- 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