Extension Icon

Open Props

Search and copy CSS custom properties from the Open Props design system.
Overview

Open Props

Search and copy CSS custom properties from the Open Props design system — directly from Raycast.

Commands

Search CSS Variables

Browse all Open Props custom properties grouped by category (shadows, sizes, typography, easings, borders, gradients, and more). Search by name or value and paste directly into your editor.

Search Colors

Browse all Open Props color palettes in a visual grid. Colors are grouped by palette and displayed as swatches. Search by name, shade, or hex value.

Actions

Every item supports the following actions:

ActionDescription
Paste VariablePastes --variable-name at the cursor
Paste as var()Pastes var(--variable-name) at the cursor
Copy VariableCopies --variable-name to clipboard
Copy as var()Copies var(--variable-name) to clipboard
Paste ValuePastes the raw CSS value at the cursor
Copy ValueCopies the raw CSS value to clipboard

Features

  • Always up to date — props are fetched from the latest Open Props release and cached locally
  • Color previews — color palettes are shown as visual swatches in the grid view
  • Grouped by category — variables are organized into sections for easy browsing