Command palette

Updated November 2, 2026

Command is a ⌘K command palette in Dialog's pixel Mac window. ⌘K (or Ctrl+K) anywhere opens it; typing filters the actions, listed under their group headings, arrows move between them while focus stays in the search box, and Enter runs one and closes the palette. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

Nothing yet

import "@/components/dithercharts/controls.css"
import { Command } from "@/components/dithercharts/command"

<Command
  items={[
    { value: "new", label: "New dashboard", onSelect: () => router.push("/new") },
    { value: "bar", label: "Bar chart", group: "Charts", onSelect: () => addChart("bar") },
    { value: "line", label: "Line chart", group: "Charts", onSelect: () => addChart("line") },
    { value: "csv", label: "Export CSV", group: "Export", onSelect: exportCsv },
    { value: "pdf", label: "Export PDF (Pro)", group: "Export", onSelect: exportPdf, disabled: true },
  ]}
/>

// Opened from a button too, controlled.
<Command open={open} onOpenChange={setOpen} items={items} />

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add command

Props

It renders a native element, so every other attribute that element takes passes through.

Command props
Prop	Type	Default	Description
itemsrequired	Type readonly CommandItem[]	Default –
label	Type string	Default `"Commands"`	Names the palette, in its title bar and to screen readers.
placeholder	Type string	Default `"Type a command…"`	The search box's placeholder.
open	Type boolean	Default –	Whether the palette is open, for a controlled palette; pair it with `onOpenChange`.
onOpenChange	Type (open: boolean) => void	Default –
shortcut	Type boolean	Default `true`	⌘K (or Ctrl+K) anywhere on the page opens the palette, and closes it again.
className	Type string	Default –