Command palette

A complete keyboard driven action surface with search, grouped results, and shortcuts.

npx shadcn@latest add @silicon-ui/command-palette
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/command-palette

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/command-palette/command-palette.tsx
    • components/silicon-ui/command-palette/command-palette.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { CommandPalette } from "@/components/silicon-ui/command-palette/command-palette";

API reference

PropTypeDefault
items*CommandItem[]—
placeholderstring"Search commands"
onSelect(item: CommandItem) => void—
onClose() => void—
labelstring"Command palette"
autoFocusbooleanfalse

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens