Zostel
Overlays Command

Command

Type to jump anywhere — places, actions, pages (cmdk).

Preview

Usage

tsx
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, PlaceIcon } from "zostel-ui";

<Command className="rounded-xl border border-zostel-beige">
  <CommandInput placeholder="Type a place or an action…" />
  <CommandList>
    <CommandEmpty>Nothing here. Try a place.</CommandEmpty>
    <CommandGroup heading="Places">
      <CommandItem value="Manali Himachal Pradesh" onSelect={go}>
        <PlaceIcon slug="manali" variant="mono" color="currentColor" size={16} />
        Manali
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

{/* as a ⌘K palette: <CommandDialog open={open} onOpenChange={setOpen}>…</CommandDialog> */}

Parts

Command
Type: cmdk root
Default: —

Filters items as you type.

CommandDialog
Type: { open, onOpenChange }
Default: —

The same, in a Dialog.

CommandItem
Type: { value?, onSelect?, disabled? }
Default: —

value is what the search matches.

CommandGroup
Type: { heading }
Default: —

A titled group.

CommandEmpty / Separator / Shortcut
Type:
Default: —

Structure.