Command
A searchable command palette.
Installation
npx shadcn@latest add @blank/commandUsage
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command"<Command>
<CommandInput placeholder="Type a command…" />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>Calendar</CommandItem>
<CommandItem>Search</CommandItem>
</CommandGroup>
</CommandList>
</Command>Examples
Dialog
CommandDialog puts a Command inside a Dialog, the usual command palette. Bind the shortcut yourself so it never collides with one your app already uses.
Command Palette
Search for a command to run...
API Reference
Command
Every cmdk Command prop, such as value, onValueChange, filter, shouldFilter and loop.
CommandDialog
Every Dialog prop, plus:
| Prop | Type | Default |
|---|---|---|
title | string | "Command Palette" |
description | string | "Search for a command to run..." |
showCloseButton | boolean | false |
CommandItem
Every cmdk Command.Item prop:
| Prop | Type | Default |
|---|---|---|
onSelect | (value: string) => void | — |
value | string | its text |
keywords | string[] | — |
disabled | boolean | false |