CommandPalette

A modal command search, the classic Ctrl+K palette.

CommandPaletteProps packages/core/src/popups.ts:722 ↗

Import

import { CommandPalette } from "@tarve/core";

Usage

CommandPalette.tsx

import { CommandPalette } from "@tarve/core";

let open = true;
let query = "";

<CommandPalette
  id="palette"
  open={open}
  query={query}
  placeholder="Type a command…"
  items={[
    { value: "new", label: "New file", keywords: ["create"] },
    { value: "theme", label: "Toggle theme" },
    { value: "quit", label: "Quit" },
  ]}
  onOpenChange={(next) => {
    open = next;
  }}
  onQueryChange={(next) => {
    query = next;
  }}
  onSelect={(value) => console.log(value)}
/>

Props

Prop	Type	Default
`open` required	`boolean`	—
`closeOnOverlay`	`boolean`	`true`
`closeOnSelect`	`boolean`	`true`
`onOpenChange`	`(open: boolean) => void`	—
`onSelect`	`(value: string) => void`	—
`width`	`number`	`520`

Inherited from CommandProps 9 props

Prop	Type	Default
`id` required	`string`	—
`items` required	`readonly CommandItem[]`	—
`query` required	`string`	—
`emptyText`	`string`	—
`onEscape`	`() => void`	—
`onQueryChange`	`(query: string) => void`	—
`onValueChange`	`(value: string) => void`	—
`placeholder`	`string`	—
`value`	`string`	—

Common props

Shared by every component. See descriptions →

childrenhighlightkeymotionFromonHighlightonPasteonTransitionEndrovingGroup

Types

CommandItem

interface CommandItem {
  value: string;
  label: string;
  keywords?: readonly string[];
  icon?: IconName;
  group?: string;
  shortcut?: string;
  disabled?: boolean;
}