fetaUI
GitHub

Command

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/command
Playground
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
Share projectInvite someone to collaborate
Archive projectRemove it from the workspace
ThemePick a theme
Searching
1 result
Share projectInvite someone to collaborate
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