command

Command palette UI shell. Pair with Popover API for ⌘K.

status: visual-only js: consumer support: popover-api

Preview

Suggestions

…

Markup

<div class="command"><div class="command-input-wrap"><svg>…</svg><input class="command-input" placeholder="Type a command…"></div><div class="command-list"><div class="command-group-heading">Suggestions</div><div class="command-item">…</div></div></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/command.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add command

Accessibility

Styled shell; fuzzy search + arrow-key nav + listbox/option roles need JS

Classes

.command .command-input-wrap .command-input .command-list .command-group .command-group-heading .command-item .command-separator .command-shortcut .command-empty .command-footer

Dependencies

base/tokens popover