Command Pill

Installation

pnpm
npm
yarn
bun
pnpm dlx shadcn@latest add https://ui.sanjid.shop/r/command-pill.json

Props

Usage

1<CommandPalette commands={commands} />

1type Command = {2  id: string;3  title: string;4  description?: string;5  icon?: React.ComponentType<{ className?: string }>;6  shortcut?: string;7  action: () => void;8};9const commands: Command[] = [10  {11    id: "profile",12    title: "Open Profile",13    description: "View or edit your profile settings",14    icon: User,15    shortcut: "P",16    action: () => toast("Opened Profile"),17  },18  {19    id: "settings",20    title: "Open Settings",21    description: "Access all app preferences",22    icon: Settings,23    shortcut: "S",24    action: () => toast("Opened Settings"),25  },26  {27    id: "docs",28    title: "Go to Docs",29    description: "Read the official documentation",30    icon: Globe,31    shortcut: "D",32    action: () => window.open("https://example.com/docs", "_blank"),33  },34  {35    id: "new-project",36    title: "Create New Project",37    description: "Start a fresh new project",38    icon: Code,39    shortcut: "N",40    action: () => toast("Creating new project..."),41  },42  {43    id: "command-palette",44    title: "Command Palette",45    description: "Open the command palette",46    icon: CommandIcon,47    shortcut: "C",48    action: () => toast("Opening command palette..."),49  },50];