Command

⌘K palette: filterable groups, arrow-key highlight, Enter to run, keyword matching. Inline or as CommandDialog with a global shortcut; the first Esc clears, the second closes.

npx @kznlabs/labsui add command

↑ ↓ to move · Enter to run · try the site-wide palette with ⌘K / Ctrl K

"use client";import { FileText } from "lucide-react";import { useRouter } from "next/navigation";import {  CommandDialog,  CommandEmpty,  CommandGroup,  CommandInput,  CommandItem,  CommandList,} from "@/components/ui/command";const pages = [  { href: "/", title: "Home" },  { href: "/blog", title: "Blog" },  { href: "/clips", title: "Clips" },];export function SitePalette() {  const router = useRouter();  return (    <CommandDialog shortcut="mod+k">      <CommandInput placeholder="Search pages…" />      <CommandList>        <CommandEmpty>No pages found.</CommandEmpty>        <CommandGroup heading="Pages">          {pages.map((p) => (            <CommandItem key={p.href} onSelect={() => router.push(p.href)}>              <FileText />              {p.title}            </CommandItem>          ))}        </CommandGroup>      </CommandList>    </CommandDialog>  );}

<Command>

Filterable, keyboard-driven list. Arrows/Home/End move, Enter selects. Use inline or in CommandDialog.

children*
ReactNode
CommandInput and CommandList.
close
() => void
Called after a selection; CommandDialog passes its own close.

Prop	Type	Default
`children*` `CommandInput` and `CommandList`.	`ReactNode`	—
`close` Called after a selection; CommandDialog passes its own close.	`() => void`	—

<CommandInput>

labeldefault "Search commands"
string
Accessible name of the input.
placeholderdefault "Type a command or search…"
string
Input placeholder.

Prop	Type	Default
`label` Accessible name of the input.	`string`	`"Search commands"`
`placeholder` Input placeholder.	`string`	`"Type a command or search…"`

<CommandList>

Scrollable results. Shows CommandEmpty only when no option matches.

children*
ReactNode
Groups, items, separators and CommandEmpty.
labeldefault "Results"
string
Accessible name of the listbox.

Prop	Type	Default
`children*` Groups, items, separators and `CommandEmpty`.	`ReactNode`	—
`label` Accessible name of the listbox.	`string`	`"Results"`

<CommandEmpty>

Also accepts every <div> prop (none of its own).

<CommandGroup>

Hides itself when none of its items match.

children*
ReactNode
CommandItems.
heading
string
Visible group title.

Prop	Type	Default
`children*` `CommandItem`s.	`ReactNode`	—
`heading` Visible group title.	`string`	—

<CommandSeparator>

Hidden while filtering, when groups collapse and separators would stack up.

<CommandItem>

children*
ReactNode
Item content, e.g. an icon and a label.
disabled
boolean
Shown but not selectable.
keepOpen
boolean
Inside CommandDialog: stay open after selecting.
keywords
readonly string[]
Extra search terms, e.g. ["settings", "preferences"].
onSelect
(value: string) => void
Called with the item's value on click or Enter.
value
string
Matched against the query and used for selection. Defaults to the item's text.

Prop	Type	Default
`children*` Item content, e.g. an icon and a label.	`ReactNode`	—
`disabled` Shown but not selectable.	`boolean`	—
`keepOpen` Inside CommandDialog: stay open after selecting.	`boolean`	—
`keywords` Extra search terms, e.g. ["settings", "preferences"].	`readonly string[]`	—
`onSelect` Called with the item's `value` on click or Enter.	`(value: string) => void`	—
`value` Matched against the query and used for selection. Defaults to the item's text.	`string`	—

<CommandDialog>

Command palette: Command in a Dialog, toggled by a global shortcut. Selecting closes it.

children*
ReactNode
CommandInput and CommandList.
onOpenChange
(open: boolean) => void
Called on the shortcut, Esc, outside click or a selection.
open
boolean
Controlled state; pair with onOpenChange.
shortcutdefault "mod+k"
false | `mod+${string}`
Global toggle, e.g. "mod+k" (⌘ on Mac, Ctrl elsewhere). Pass false to disable.
titledefault "Command palette"
string
Accessible dialog title (visually hidden).

Prop	Type	Default
`children*` `CommandInput` and `CommandList`.	`ReactNode`	—
`onOpenChange` Called on the shortcut, Esc, outside click or a selection.	`(open: boolean) => void`	—
`open` Controlled state; pair with `onOpenChange`.	`boolean`	—
`shortcut` Global toggle, e.g. "mod+k" (⌘ on Mac, Ctrl elsewhere). Pass false to disable.	false \| `mod+${string}`	`"mod+k"`
`title` Accessible dialog title (visually hidden).	`string`	`"Command palette"`

* required. Every component also takes className.