ComponentsOverlays

Command

A searchable command palette, opened with ⌘K.

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut } from "junco";

<CommandDialog>
  <CommandInput placeholder="Search…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Pages">
      <CommandItem onSelect={() => go("/settings")}>
        Settings <CommandShortcut>⌘,</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

Examples#

Command palette#

CommandDialog listens for ⌘K / Ctrl+K on its own. This site already uses ⌘K for search, so this demo sets shortcut="j": click the button or press ⌘J / Ctrl+J. Esc returns focus to where you were.

Inline#

Command also works on the page, for pickers and searchable lists.

API reference#

`CommandDialog`#

Command inside a Dialog, with a keyboard shortcut. Also takes every Command prop.

open: Controlled open state.; boolean
defaultOpen: Initial open state when uncontrolled.; boolean; Default: false
onOpenChange: Called when it opens or closes, including from the shortcut.; (open: boolean) => void
shortcut: Letter that toggles it with ⌘ or Ctrl. null turns the shortcut off.; string | null; Default: "k"
title: Dialog title for screen readers.; string; Default: "Command palette"
description: Dialog description for screen readers.; string; Default: "Search for a command to run."
classNames: Class overrides for the dialog and the list.; { content?, command? }

Prop	Type	Default
`open` Controlled open state.	`boolean`	`–`
`defaultOpen` Initial open state when uncontrolled.	`boolean`	`false`
`onOpenChange` Called when it opens or closes, including from the shortcut.	`(open: boolean) => void`	`–`
`shortcut` Letter that toggles it with ⌘ or Ctrl. null turns the shortcut off.	`string \| null`	`"k"`
`title` Dialog title for screen readers.	`string`	`"Command palette"`
`description` Dialog description for screen readers.	`string`	`"Search for a command to run."`
`classNames` Class overrides for the dialog and the list.	`{ content?, command? }`	`–`

`Command`#

The searchable list (cmdk).

filter: Custom ranking. Return 0 to hide an item.; (value, search) => number
shouldFilter: Set false when you filter on the server.; boolean; Default: true
loop: Arrow keys wrap from the last item to the first.; boolean; Default: false

Prop	Type	Default
`filter` Custom ranking. Return 0 to hide an item.	`(value, search) => number`	`–`
`shouldFilter` Set false when you filter on the server.	`boolean`	`true`
`loop` Arrow keys wrap from the last item to the first.	`boolean`	`false`

`CommandItem`#

onSelect: Runs on click or Enter.; (value: string) => void
value: Text matched by search. Defaults to the item's text.; string
keywords: Extra words that should match this item.; string[]
disabled: Shown but not selectable.; boolean

Prop	Type	Default
`onSelect` Runs on click or Enter.	`(value: string) => void`	`–`
`value` Text matched by search. Defaults to the item's text.	`string`	`–`
`keywords` Extra words that should match this item.	`string[]`	`–`
`disabled` Shown but not selectable.	`boolean`	`–`

Accessibility#

Keyboard interactions
Key	Action
`⌘K`	Opens or closes CommandDialog (Ctrl+K on Windows and Linux).
`↓↑`	Moves between results.
`Enter`	Runs the highlighted result.
`Esc`	Closes the dialog and returns focus.

The input is a combobox that controls a listbox; the highlighted result is announced as you move.
CommandDialog includes a hidden title and description, so screen readers know what opened.
Every action in the palette should also exist somewhere visible: the palette is a shortcut, not the only way.

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut } from "junco";

<CommandDialog>
  <CommandInput placeholder="Search…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Pages">
      <CommandItem onSelect={() => go("/settings")}>
        Settings <CommandShortcut>⌘,</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

Examples#

Command palette#

Inline#

Command also works on the page, for pickers and searchable lists.

API reference#

`CommandDialog`#

Command inside a Dialog, with a keyboard shortcut. Also takes every Command prop.

open: Controlled open state.; boolean
defaultOpen: Initial open state when uncontrolled.; boolean; Default: false
onOpenChange: Called when it opens or closes, including from the shortcut.; (open: boolean) => void
shortcut: Letter that toggles it with ⌘ or Ctrl. null turns the shortcut off.; string | null; Default: "k"
title: Dialog title for screen readers.; string; Default: "Command palette"
description: Dialog description for screen readers.; string; Default: "Search for a command to run."
classNames: Class overrides for the dialog and the list.; { content?, command? }

Prop	Type	Default
`open` Controlled open state.	`boolean`	`–`
`defaultOpen` Initial open state when uncontrolled.	`boolean`	`false`
`onOpenChange` Called when it opens or closes, including from the shortcut.	`(open: boolean) => void`	`–`
`shortcut` Letter that toggles it with ⌘ or Ctrl. null turns the shortcut off.	`string \| null`	`"k"`
`title` Dialog title for screen readers.	`string`	`"Command palette"`
`description` Dialog description for screen readers.	`string`	`"Search for a command to run."`
`classNames` Class overrides for the dialog and the list.	`{ content?, command? }`	`–`

`Command`#

The searchable list (cmdk).

filter: Custom ranking. Return 0 to hide an item.; (value, search) => number
shouldFilter: Set false when you filter on the server.; boolean; Default: true
loop: Arrow keys wrap from the last item to the first.; boolean; Default: false

Prop	Type	Default
`filter` Custom ranking. Return 0 to hide an item.	`(value, search) => number`	`–`
`shouldFilter` Set false when you filter on the server.	`boolean`	`true`
`loop` Arrow keys wrap from the last item to the first.	`boolean`	`false`

`CommandItem`#

onSelect: Runs on click or Enter.; (value: string) => void
value: Text matched by search. Defaults to the item's text.; string
keywords: Extra words that should match this item.; string[]
disabled: Shown but not selectable.; boolean

Prop	Type	Default
`onSelect` Runs on click or Enter.	`(value: string) => void`	`–`
`value` Text matched by search. Defaults to the item's text.	`string`	`–`
`keywords` Extra words that should match this item.	`string[]`	`–`
`disabled` Shown but not selectable.	`boolean`	`–`

Accessibility#

Keyboard interactions
Key	Action
`⌘K`	Opens or closes CommandDialog (Ctrl+K on Windows and Linux).
`↓↑`	Moves between results.
`Enter`	Runs the highlighted result.
`Esc`	Closes the dialog and returns focus.

The input is a combobox that controls a listbox; the highlighted result is announced as you move.

CommandDialog includes a hidden title and description, so screen readers know what opened.

Every action in the palette should also exist somewhere visible: the palette is a shortcut, not the only way.

Usage#

Examples#

Command palette#

Inline#

API reference#

CommandDialog#

Command#

CommandItem#

Accessibility#

Usage#

Examples#

Command palette#

Inline#

API reference#

CommandDialog#

Command#

CommandItem#

Accessibility#

`CommandDialog`#

`Command`#

`CommandItem`#

`CommandDialog`#

`Command`#

`CommandItem`#