Command Palette

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/command-palette.json

npx shadcn@latest add https://prototyper-ui.com/r/command-palette.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/command-palette.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/command-palette.json

This will add the following files to your project:

components/ui/command-palette.tsx

Usage

import {
  CommandPalette,
  CommandPaletteContent,
  CommandInput,
  CommandGroup,
  CommandItem,
  CommandEmpty,
  CommandList,
} from "@/components/ui/command-palette";

<CommandPalette open={open} onOpenChange={setOpen}>
  <CommandPaletteContent>
    <CommandInput />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Actions">
        <CommandItem value="Search" onSelect={() => {}}>
          Search
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </CommandPaletteContent>
</CommandPalette>;

Anatomy

<CommandPalette>
  <CommandPaletteContent>
    <CommandInput />
    <CommandList>
      <CommandEmpty />
      <CommandGroup>
        <CommandItem />
      </CommandGroup>
      <CommandSeparator />
    </CommandList>
  </CommandPaletteContent>
</CommandPalette>

Sub-component	`data-slot`	Purpose	Required
`CommandPalette`	`command-palette`	Root provider, manages open/close state and search	Yes
`CommandPaletteContent`	`command-palette-content`	The popup panel with overlay backdrop	Yes
`CommandInput`	`command-input`	Text input for filtering items	Yes
`CommandList`	`command-list`	Scrollable container for groups and items	Yes
`CommandGroup`	`command-group`	Groups related items with an optional heading	No
`CommandItem`	`command-item`	Individual selectable command item	Yes
`CommandEmpty`	`command-empty`	Shown when search yields no results	No
`CommandSeparator`	`command-separator`	Visual divider between groups	No

Styling

Data Slots

Use data-slot attributes to target specific parts of the command palette:

Slot name	Element
`command-palette`	Root provider (no DOM element)
`command-palette-portal`	Portal wrapper
`command-palette-overlay`	Backdrop overlay
`command-palette-content`	The popup panel
`command-input-wrapper`	Wrapper around the search icon + input
`command-input`	The search input element
`command-list`	Scrollable items container
`command-group`	Group wrapper
`command-group-heading`	Group heading text
`command-item`	Individual item row
`command-shortcut`	Keyboard shortcut badge
`command-empty`	Empty state message
`command-separator`	Divider line

Customization Examples

/* Widen the command palette */
[data-slot="command-palette-content"] {
  @apply max-w-2xl;
}

/* Custom item highlight color */
[data-slot="command-item"][data-highlighted] {
  @apply bg-primary/10;
}

{
  /* Override styles via className */
}
<CommandPaletteContent className="max-w-2xl">
  {/* ... */}
</CommandPaletteContent>;

API Reference

CommandPalette

Root component that manages dialog state, search state, and item registration.

Prop

Type

CommandPaletteContent

The popup panel rendered inside a portal with an overlay backdrop.

Prop

Type

All standard div props are forwarded via ...props.

CommandInput

Search input that filters items and handles keyboard navigation.

Prop

Type

All standard input props are forwarded via ...props.

CommandList

Scrollable container for command groups and items.

Prop

Type

All standard div props are forwarded via ...props.

CommandGroup

Groups related items under an optional heading.

Prop

Type

All standard div props are forwarded via ...props.

CommandItem

An individual selectable command.

Prop

Type

All standard div props are forwarded via ...props.

CommandEmpty

Placeholder content shown when the search query matches no items.

Prop

Type

All standard div props are forwarded via ...props.

CommandSeparator

A visual divider between groups.

Prop

Type

All standard div props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`ArrowDown`	Moves highlight to the next enabled item
`ArrowUp`	Moves highlight to the previous enabled item
`Enter`	Selects the currently highlighted item
`Escape`	Closes the command palette
`Tab`	Moves focus to the next focusable element

ARIA Attributes

Each CommandItem renders with role="option" and aria-selected reflecting the highlight state.
aria-disabled is set on disabled items.
The dialog is modal -- focus is trapped inside while open.
The search input receives auto-focus when the palette opens.

On this page