Command Palette

A search surface on cmdk: a 20px-radius panel with a 48px input row and grouped 36px rows.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { CommandPalette } from '@/components/component-kit/items/command-palette';
2
3export function Example() {
4  return (
5    <CommandPalette
6      placeholder="Search actions"
7      groups={[
8        { id: 'go', heading: 'Go to', items: [{ id: 'inbox', label: 'Inbox', shortcut: 'G I' }] },
9        { id: 'do', heading: 'Actions', items: [{ id: 'new', label: 'New document', shortcut: '⌘N' }] },
10      ]}
11    />
12  );
13}

Props

Command Palette properties
Prop	Type	Default	Description
`groups`	`CommandPaletteGroup[]`	`—`	Groups with an optional heading and their items.
`placeholder`	`string`	`Search…`	Input placeholder.
`onItemSelect`	`(item) => void`	`—`	Called with the chosen item.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { CommandPalette } from '@/components/component-kit/items/command-palette';
2
3export function Example() {
4  return (
5    <CommandPalette
6      placeholder="Search actions"
7      groups={[
8        { id: 'go', heading: 'Go to', items: [{ id: 'inbox', label: 'Inbox', shortcut: 'G I' }] },
9        { id: 'do', heading: 'Actions', items: [{ id: 'new', label: 'New document', shortcut: '⌘N' }] },
10      ]}
11    />
12  );
13}

Prop

Type

Default

Description

groups

CommandPaletteGroup[]

—

Groups with an optional heading and their items.

placeholder

string

Search…

Input placeholder.

onItemSelect

(item) => void

—

Called with the chosen item.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { CommandPalette } from '@/components/component-kit/items/command-palette';
2
3export function Example() {
4  return (
5    <CommandPalette
6      placeholder="Search actions"
7      groups={[
8        { id: 'go', heading: 'Go to', items: [{ id: 'inbox', label: 'Inbox', shortcut: 'G I' }] },
9        { id: 'do', heading: 'Actions', items: [{ id: 'new', label: 'New document', shortcut: '⌘N' }] },
10      ]}
11    />
12  );
13}

Prop

Type

Default

Description

groups

CommandPaletteGroup[]

—

Groups with an optional heading and their items.

placeholder

string

Search…

Input placeholder.

onItemSelect

(item) => void

—

Called with the chosen item.

Command Palette

A search surface on cmdk: a 20px-radius panel with a 48px input row and grouped 36px rows.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { CommandPalette } from '@/components/component-kit/items/command-palette';
2
3export function Example() {
4  return (
5    <CommandPalette
6      placeholder="Search actions"
7      groups={[
8        { id: 'go', heading: 'Go to', items: [{ id: 'inbox', label: 'Inbox', shortcut: 'G I' }] },
9        { id: 'do', heading: 'Actions', items: [{ id: 'new', label: 'New document', shortcut: '⌘N' }] },
10      ]}
11    />
12  );
13}

Props

Command Palette properties
Prop	Type	Default	Description
`groups`	`CommandPaletteGroup[]`	`—`	Groups with an optional heading and their items.
`placeholder`	`string`	`Search…`	Input placeholder.
`onItemSelect`	`(item) => void`	`—`	Called with the chosen item.