Components
Command
A command palette built on cmdk.
Command is built on cmdk. It renders a searchable command palette with grouped items and keyboard navigation.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/command.jsonUsage
"use client";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
export default function Example() {
return (
<Command>
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>Calendar</CommandItem>
<CommandItem>Search</CommandItem>
</CommandGroup>
</CommandList>
</Command>
);
}Examples
Default
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Commanddata-slot="command" | Commandcmdk | — |
CommandDialog | DialogFaber UI |
|
CommandInputdata-slot="command-input" | Command.Inputcmdk | — |
CommandListdata-slot="command-list" | Command.Listcmdk | — |
CommandEmptydata-slot="command-empty" | Command.Emptycmdk | — |
CommandGroupdata-slot="command-group" | Command.Groupcmdk | — |
CommandSeparatordata-slot="command-separator" | Command.Separatorcmdk | — |
CommandItemdata-slot="command-item" | Command.Itemcmdk | — |
CommandShortcutdata-slot="command-shortcut" | <span>HTML | — |
Changelog
- v0.3.0CommandDialog opens and closes without animation, as a keyboard-invoked palette should, and its accessible title renders inside the dialog.patch
- v0.3.0Input, Textarea, NativeSelect, CommandInput and ComboboxChipsInput use 16px text on small screens so iOS Safari no longer zooms the page on focus.patch
Last updated on