Overlays

Command palette.

A keyboard route to the next page or action.

LIVE PREVIEWTry it. It works.

Choose an action to see the result.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/command.json

Registry setup · Open the playground

Usage

<CommandPalette shortcut title="Quick actions"
  trigger={<Button>Search</Button>}
  items={[{id:"new",label:"New project",keywords:["create"],onSelect:createProject}]} />

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Base UI Combobox inside Dialog supplies arrows, active-descendant focus, Enter selection and Escape dismissal. Items accept descriptions, keywords, category, Lucide icon and disabled. open/onOpenChange and defaultOpen are supported. Register shortcut (Ctrl/Command+K) on only one palette per app. Shortcut is off by default. Your callbacks own navigation and actions.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.