Overlays · Application UI
Command
Command palette built on cmdk with dialog and input-group integration.
@byronwade/foundation@byronwade/utils@byronwade/dialog@byronwade/input-groupcmdk@phosphor-icons/react
Feature showcase
Installation
Features
9 examples
Default, Inline, With Icons, Grouped, Empty State, Actions, Cards, Files, People.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | CommandDialog: controlled open state. |
| onOpenChange | (open: boolean) => void | - | CommandDialog: fires when the dialog opens or closes. |
| title | string | "Command Palette" | CommandDialog: visually-hidden accessible title. |
| description | string | - | CommandDialog: visually-hidden accessible description. |
| onSelect | (value: string) => void | - | CommandItem: fires when the item is chosen via click or Enter. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @byronwade/dialog | registry | Installed through the byronwade/ui registry. |
| @byronwade/input-group | registry | Installed through the byronwade/ui registry. |
| cmdk | npm | Installed from npm. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/command.tsx |
| Default example | content/examples/command/default.tsx |
| Inline example | content/examples/command/inline.tsx |
| With Icons example | content/examples/command/with-icons.tsx |
| Grouped example | content/examples/command/grouped.tsx |
| Empty State example | content/examples/command/empty-state.tsx |
| Actions example | content/examples/command/actions.tsx |
| Cards example | content/examples/command/cards.tsx |
| Files example | content/examples/command/files.tsx |
| People example | content/examples/command/people.tsx |