React Command Palette

Install (any variant)

npx shadcn@latest add https://better-design.com/registry/linear/command.json

Replace linear with any design system slug. Every variant ships from the same registry.

Design system variants

Browse all 73 design systems

Why this command palette

• •cmdk under the hood: fuzzy filter, keyboard nav, group headings out of the box
• •Radix Dialog for the modal: focus trap, escape-to-close, scroll lock
• •73 design-system variants: Linear sharp dark, Vercel pure black, Apple soft
• •Ships as shadcn-compatible registry: `npx shadcn@latest add`

Usage

import {
  CommandDialog, CommandInput, CommandList,
  CommandEmpty, CommandGroup, CommandItem,
} from "@/components/ui/command";

export function CommandMenu({ open, onOpenChange }) {
  return (
    <CommandDialog open={open} onOpenChange={onOpenChange}>
      <CommandInput placeholder="Type a command..." />
      <CommandList>
        <CommandEmpty>No results.</CommandEmpty>
        <CommandGroup heading="Navigate">
          <CommandItem>Inbox</CommandItem>
          <CommandItem>Issues</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  );
}

FAQ

Related component pages