bx

Command

Fast, composable, unstyled command menu.

Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile
Billing
tsx 
<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 — palette de commandes (fuzzy-search + navigation clavier). Le pattern ⌘K populaire depuis Linear / Raycast — user tape, la liste filtre en temps réel, Enter active l'item focus.

Peut être utilisé standalone (dans un panel latéral) ou embarqué dans un Dialog pour un modal ⌘K.

Installation

Terminal 
$ bext ui add command

Usage

tsx 
import { 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 du champ recherche.
className string — Input avec icône search intégrée à gauche.

CommandList

Prop Type Default Description
className string — Container scrollable des items. max-h-[300px].

CommandGroup

Prop Type Default Description
heading string — Titre de section muted au-dessus des items.

CommandItem

Prop Type Default Description
href string — Si présent, rend — sinon
.
onSelect function — Callback à l'activation (Enter ou clic).

CommandSeparator

Prop Type Default Description
— — — Trait fin entre groupes.

CommandEmpty

Prop Type Default Description
children ReactNode — Affiché quand aucun item ne matche.

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute On Values Description
data-command root — Ancre pour l'island de fuzzy-search.
data-command-item CommandItem — Chaque item testable via matches sur le texte.

Keyboard

Key Action
↑ / ↓ Navigation entre items visibles.
Enter Active l'item focus.
Escape Ferme (si dans un Dialog).
⌘K / Ctrl+K Convention pour toggle une command palette globale.

Accessibility

CommandInput doit avoir role="combobox", aria-expanded, aria-autocomplete="list". La liste porte role="listbox", chaque item role="option" aria-selected.

Sans ces attributs le screen reader n'annonce pas le filtre live.

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
Pure PRISM + real bext signals — fine-grained, no re-render.
← Combobox Context Menu →