Command

A command palette for fast keyboard-driven navigation and search, featuring grouped results, fuzzy matching, and keyboard shortcuts.

Preview

Usage

tsx

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

<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Destinations">
      <CommandItem>Zostel Manali</CommandItem>
      <CommandItem>Zostel Jaipur</CommandItem>
      <CommandItem>Zostel Goa</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Actions">
      <CommandItem>New Booking</CommandItem>
      <CommandItem>View Profile</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Props

Prop	Type	Default	Description
`value`	`string`	—	Controlled value of the selected command item
`onValueChange`	`(value: string) => void`	—	Callback when the selected value changes
`filter`	`(value: string, search: string) => number`	—	Custom filter function for command items. Return 1 for match, 0 for no match
`loop`	`boolean`	false	Whether keyboard navigation loops from last item to first

value

Type: string

Default: —

Controlled value of the selected command item

onValueChange

Type: (value: string) => void

Default: —

Callback when the selected value changes

filter

Type: (value: string, search: string) => number

Default: —

Custom filter function for command items. Return 1 for match, 0 for no match

loop

Type: boolean

Default: false

Whether keyboard navigation loops from last item to first

Previous Toast Next Alert