Command
A searchable command palette. Built on Base UI's Autocomplete primitive for filtering and keyboard navigation, and its Dialog primitive when used as a ⌘K overlay. Can also render standalone with CommandPanel, without a dialog.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- Added RTL support
- Added a standalone CommandPanel for non-dialog usage
- Added CommandFooter for keyboard-hint helpers, hidden on small screens
Overview
Installation
Usage
import {
Command,
CommandCollection,
CommandDialog,
CommandDialogPopup,
CommandDialogTrigger,
CommandEmpty,
CommandFooter,
CommandGroup,
CommandGroupLabel,
CommandInput,
CommandItem,
CommandList,
CommandPanel,
CommandSeparator,
CommandShortcut,
} from "@/components/ui/command"
import { Button } from "@/components/ui/button"
const items = [
{ value: "linear", label: "Linear" },
{ value: "figma", label: "Figma" },
{ value: "slack", label: "Slack" },
]
export function Example() {
return (
<CommandDialog>
<CommandDialogTrigger render={<Button variant="outline" />}>
Open Command Palette
</CommandDialogTrigger>
<CommandDialogPopup>
<Command items={items}>
<CommandInput placeholder="Search..." />
<CommandEmpty>No results found.</CommandEmpty>
<CommandList>
{(item) => (
<CommandItem key={item.value} value={item.value}>
{item.label}
</CommandItem>
)}
</CommandList>
<CommandFooter>Use arrow keys to navigate, Enter to select</CommandFooter>
</Command>
</CommandDialogPopup>
</CommandDialog>
)
}Examples
Standalone panel
Render commands without a dialog by wrapping
Command in
CommandPanel.
Groups
RTL
No configuration needed — nest the command inside a
dir="rtl"
container and everything, including keyboard navigation, mirrors
automatically.
API Reference
Command
API reference: Base UI Command .
CommandDialog
API reference: Base UI CommandDialog .