Command

A Cmd-K command palette — a filtering input over a grouped, keyboard-navigable list. The searchable surface behind Combobox.

A command palette: a filtering input over a grouped, keyboard-navigable list — the Raycast / Spotlight pattern. Type and the list filters in place. Built on cmdk for accessible keyboard nav and matching, skinned for the frosted acrylic surface. This is the same searchable list that powers the Combobox dropdown; use it directly when you want a standalone palette (a ⌘K menu, a page switcher, an action launcher).

Installation

npx shadcn add https://acrylic-ui.vercel.app/r/command.json

Usage

"use client"import {  Calculator,  Calendar,  CreditCard,  Settings,  Smile,  User,} from "lucide-react"import {  Command,  CommandEmpty,  CommandGroup,  CommandInput,  CommandItem,  CommandList,  CommandSeparator,} from "@/registry/acrylic/command"// A standalone command palette (⌘K-style): the filtering input up top, grouped// results below. Normally Command lives inside a Popover (that's how Combobox// uses it); here it's shown flat on the frosted panel surface so the pieces are// visible. Type to filter — cmdk matches each item by its text.const SHORTCUT = "ms-auto text-[11px] tracking-widest text-muted-foreground"export default function CommandDemo() {  return (    <Command className="w-full max-w-[360px] rounded-[10px] bg-[var(--acr-panel)] shadow-[0_0_0_1px_rgba(190,190,190,0.16),0_16px_48px_rgba(0,0,0,0.45)] backdrop-blur-xl">      <CommandInput placeholder="Type a command or search…" />      <CommandList>        <CommandEmpty>No results found.</CommandEmpty>        <CommandGroup heading="Suggestions">          <CommandItem>            <Calendar className="size-3.5 text-muted-foreground" />            Calendar          </CommandItem>          <CommandItem>            <Smile className="size-3.5 text-muted-foreground" />            Search Emoji          </CommandItem>          <CommandItem>            <Calculator className="size-3.5 text-muted-foreground" />            Calculator          </CommandItem>        </CommandGroup>        <CommandSeparator />        <CommandGroup heading="Settings">          <CommandItem>            <User className="size-3.5 text-muted-foreground" />            Profile            <span className={SHORTCUT}>⌘P</span>          </CommandItem>          <CommandItem>            <CreditCard className="size-3.5 text-muted-foreground" />            Billing            <span className={SHORTCUT}>⌘B</span>          </CommandItem>          <CommandItem>            <Settings className="size-3.5 text-muted-foreground" />            Settings            <span className={SHORTCUT}>⌘S</span>          </CommandItem>        </CommandGroup>      </CommandList>    </Command>  )}

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/acrylic/command"

<Command>
  <CommandInput placeholder="Type a command or search…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

The Command above is bare — it has no surface of its own so it can sit inside a Popover. For a standalone palette, give it the panel material (rounded-[10px] bg-[var(--acr-panel)] backdrop-blur-xl + a shadow), as the preview does. To make it a ⌘K overlay, drop it inside a Dialog.

Anatomy

Part	Role
`Command`	Root. Holds the cmdk state (query + filtered results) and keyboard nav.
`CommandInput`	The filtering text field, with a leading search icon. Typing filters the list.
`CommandList`	Scroll container (`max-h-64`) for the results.
`CommandEmpty`	Shown when nothing matches the query.
`CommandGroup`	A titled section of items (`heading` prop).
`CommandItem`	One selectable row. Matched against the query by its text (or `value`).
`CommandSeparator`	1px hairline between groups.

Notes

Filtering is automatic. cmdk matches each CommandItem against the query by its text content; pass an explicit value to match on something else.
CommandItem has no press animation on purpose — highlight follows the keyboard/pointer instantly (data-[selected=true]), which is what a fast palette should feel like.
Inside Combobox this whole surface is the dropdown: CommandInput is the "Search…" box, CommandItem the options.
Trailing content in a CommandItem (a ⌘P keycap, a count) floats right with ms-auto.

Installation

Usage

Anatomy

Notes

On this page