React Command Component

or press ⌘J

Installation

pnpm add krz-ui

Usage

import { Command, CommandDialog } from "krz-ui";

<CommandDialog
  open={open}
  onOpenChange={setOpen}
  hotkey="k"
  groups={[
    {
      heading: "Pages",
      items: [
        { value: "home", label: "Home", onSelect: () => router.push("/") },
        { value: "settings", label: "Settings", keywords: ["preferences"], shortcut: "⌘," },
      ],
    },
  ]}
/>

API Reference

Prop	Type	Description
`groups`	`CommandGroup[]`	Groups with an optional heading and items.
`items[].onSelect`	`() => void`	Runs when the item is chosen with click or Enter.
`items[].keywords`	`string[]`	Extra words that match the search.
`placeholder / emptyText`	`string / ReactNode`	Search placeholder and no-results text.
`onSelect`	`(item) => void`	Called for every selected item.
`open / onOpenChange`	`boolean / (open) => void`	CommandDialog only: controls the dialog.
`hotkey`	`string`	CommandDialog only: ⌘ / Ctrl + this key toggles it.
`className / style / ref`	`—`	All go to the palette (for CommandDialog, the palette inside the dialog; style the dialog with classNames.dialog). See Customization.
`classNames`	`{ search?, input?, list?, empty?, group?, heading?, item?, icon?, shortcut?, dialog?, overlay? }`	Extra classes for inner parts. (`dialog` and `overlay` are on CommandDialog.)