Overlays

CommandPalette

Search every action and place from one box, with ⌘K.

import { CommandPalette } from "@flinbu/seed";

Groups, shortcuts and keywords

or press ⌘ K

import { Button, CommandPalette, Kbd } from "@flinbu/seed";
import { Component, Palette, Plus, Search, Settings, Sun } from "lucide-react";

<div className="flex items-center gap-xs">
  <CommandPalette
    trigger={<Button variant="secondary" leftIcon={<Search />}>Search</Button>}
    groups={[
      { label: "Create", items: [{ label: "New token", icon: <Plus />, shortcut: ["⌘", "N"], keywords: ["add"] }, { label: "New component", icon: <Component /> }] },
      { label: "Go to", items: [{ label: "Color tokens", icon: <Palette />, description: "148 tokens" }, { label: "Settings", icon: <Settings />, shortcut: ["⌘", ","] }] },
      { label: "Preferences", items: [{ label: "Switch to Dark", icon: <Sun />, keywords: ["theme", "mode"] }] },
    ]} />
  <span className="text-tertiary body-body-3-regular">or press <Kbd>⌘</Kbd> <Kbd>K</Kbd></span>
</div>

Use it for

Apps with many commands and pages.

Use something else for

The only way to reach something: keep it in the UI too.

Props

Prop	Type	Default	Description
`groups`	`{ label?, items: CommandItem[] }[]`	–	CommandItem: { label, icon?, description?, shortcut?, keywords?, onSelect?, disabled? }.
`trigger`	`ReactElement`	–	A Button that opens it.
`hotkey`	`stringfalse`	`'k'`	With ⌘ or Ctrl.
`open / defaultOpen / onOpenChange`	`boolean`	–	Control it yourself.
`placeholder / emptyText`	`string / ReactNode`	–	Texts.

Accessibility

A labelled dialog with a combobox and a listbox: arrows move, Enter runs, Escape closes and returns focus.
⌘K or Ctrl+K toggles it (hotkey changes it).