Command

Fast, composable, unstyled command menu.

Suggestions

Calendar

Search Emoji

Calculator

Settings

Profile

Billing

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13<Command>
  <CommandInput placeholder="Type a command..." />
  <CommandList>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Command is a command palette (fuzzy search and keyboard navigation). It is the ⌘K pattern popularized by Linear and Raycast: the user types, the list filters in real time, and Enter activates the focused item.

It can be used standalone (in a side panel) or embedded in a Dialog for a ⌘K modal.

Installation

Terminal

$ bext ui add command

Copy and paste the following into src/components/ui/command.tsx.

command.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13<Command>
  <CommandInput placeholder="Type a command..." />
  <CommandList>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

This component is interactive. Make sure the shared island is loaded (see Islands). It reacts to data-ui="command" hooks.

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11import { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandSeparator } from "@bext-stack/ui/primitives"

<Command>
  <CommandInput placeholder="Type a command..." />
  <CommandList>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Anatomy

<Command>
  ├── <CommandInput placeholder="Type a command..." />
  └── <CommandList>
      ├── <CommandGroup heading="Suggestions">
      │   ├── <CommandItem>Calendar</CommandItem>
      │   └── <CommandItem>Search Emoji</CommandItem>
      ├── <CommandSeparator />
      └── <CommandGroup heading="Settings">
          └── <CommandItem>Profile</CommandItem>

API Reference

Command

Prop	Type	Default	Description
className	string	—	Wrapper flex flex-col overflow-hidden rounded-md border bg-popover.

CommandInput

Prop	Type	Default	Description
placeholder	string	—	Placeholder of the search field.
className	string	—	Input with a built-in search icon on the left.

CommandList

Prop	Type	Default	Description
className	string	—	Scrollable container for the items. max-h-[300px].

CommandGroup

Prop	Type	Default	Description
heading	string	—	Muted section title above the items.

CommandItem

Prop	Type	Default	Description
href	string	—	If set, renders <a>, otherwise <div>.
onSelect	function	—	Callback on activation (Enter or click).

CommandSeparator

Prop	Type	Default	Description
—	—	—	Thin line between groups.

CommandEmpty

Prop	Type	Default	Description
children	ReactNode	—	Shown when no item matches.

Data Attributes

Attributes you can target in custom CSS to override the style for each state.

Attribute	On	Values	Description
data-command	root	—	Anchor for the fuzzy-search island.
data-command-item	CommandItem	—	Each item is matched against its text.

Keyboard

Key	Action
`↑ / ↓`	Moves between visible items.
`Enter`	Activates the focused item.
`Escape`	Closes (when inside a Dialog).
`⌘K / Ctrl+K`	Convention for toggling a global command palette.

Accessibility

CommandInput must have role="combobox", aria-expanded, aria-autocomplete="list". The list carries role="listbox", each item role="option" aria-selected.

Without these attributes, screen readers do not announce the live filtering.

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom: fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A command palette: an input bound to a `query` signal feeds a computed
// `results` signal; a reactive <List each={() => results.value}> renders
// the matches, and a <Show> renders the empty state. All fine-grained.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Command</h1>
      <p style="color:#64748b;margin-top:0">Type to filter: the input drives a computed list, rendered reactively.</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals: fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Command from "../components/Command";

export default function Page() {
  return (
    <main style={{ maxWidth: 560, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Command</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A filterable command palette - type to narrow the list.</p>
      <div style={{ marginTop: 20 }}><Command /></div>
    </main>
  );
}

The React idiom: same UI, for comparison.

← Combobox Context Menu →

On This Page