A keyboard first menu for every action in the product, with fuzzy search, submenus and inline confirmation.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/commandPlayground
Create
New projectStart from a blank setup
New documentWrite a brief or a spec
Invite teammateSend an invite by email
Project
Edit projectUpdate the project details
Duplicate projectCreate a copy with the same setup
Archive projectRemove it from the workspace
ThemePick a theme
Searching
1 result
No results
No commands for “deploy”Try a project action, or ask the assistant instead.
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/command
Accessibility
- A native modal dialog, so the page is inert, with a combobox input and a listbox of options.
- Groups use role group with aria-labelledby.
- Shortcuts are exposed with aria-keyshortcuts.
- Focus stays inside the dialog and returns to where ⌘K was pressed.
- The confirm moves focus to Cancel.
Motion
- Opens from the center in 180 ms, scaling from 0.96 while the scrim fades in. Closes in 120 ms.
- The highlight glides between rows in 100 ms, and the key you pressed flashes in the footer.
- Rows fade in 120 ms as the search filters.
- Submenus slide in 16 px over 200 ms and the chip scales in.
- With reduced motion, everything appears in place.
Responsive behavior
- 580 wide on Web and full width on Mobile.
- Mobile shows titles only with 44 px rows, Cancel in place of Esc, and a hint in the footer.
Performance
- Filtering is memoized on the query and groups, using a plain in order letter match over titles and descriptions.
- Rows are not virtualized, so keep the list to what a person can scan.
- CommandDialog mounts its panel only while open, and its ⌘K listener is removed on unmount.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Command and CommandDialog from @/components/fetaui/command after installing it.
- Each item needs id and title. onRun may return a promise and the row spins until it settles. A rejection keeps the palette open and the footer names what failed. items opens a submenu and confirm holds it behind an inline danger step.
- hotkey defaults to true in CommandDialog, so mount only one. shortcut changes the hint, not the key.
- The invite delay and onAsk in the demo are stand ins. onAsk appears only when nothing matches. CommandDialog composes Modal, and both compose Button and the Dropdown Menu keycaps.
Related
Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.SearchComponentA search field and a command palette for finding anything and running commands.KbdComponentA keycap for showing keyboard input. One key per cap, grouped as a combo, chord or sequence.MenubarComponentA persistent row of menus, like a desktop app. The open tab slides between triggers, and holding Alt shows every access key.ComboboxComponentAn input that filters a list as you type, for one value or many.