Command Palette

A searchable command palette for quick actions. Built on cmdk — copy it into your project and own it completely.

Default

Multiple Groups

Empty State

Installation

npx visor add command

This copies two files into your project:

components/ui/command/command.tsx — the component
components/ui/command/command.module.css — the styles

Usage

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from '@/components/ui/command/command';

export default function Example() {
  return (
    <Command>
      <CommandInput placeholder="Type a command..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Actions">
          <CommandItem>Profile</CommandItem>
          <CommandItem>Settings</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

API Reference

Command

Prop	Type	Default	Description
`value`	`string`	—	Controlled selected value.
`onValueChange`	`(value: string) => void`	—	Callback when the selected value changes.
`filter`	`(value: string, search: string) => number`	—	Custom filter function. Return 1 for a match, 0 for no match.
`shouldFilter`	`boolean`	`true`	Whether cmdk should filter items internally. Set to false for async/server-side filtering.
`loop`	`boolean`	`false`	When true, keyboard navigation wraps from the last item back to the first.
`className`	`string`	—	Additional CSS class names to merge onto the element.

The Command root accepts all standard <div> HTML attributes in addition to the props above.

Sub-components

Component	Element	Purpose
`Command`	`<div>`	Root container — provides filtering context
`CommandInput`	`<input>`	Search input with built-in magnifier icon
`CommandList`	`<div>`	Scrollable list container
`CommandEmpty`	`<div>`	Shown when no items match the current search
`CommandGroup`	`<div>`	Labeled group of related items
`CommandItem`	`<div>`	Selectable action item
`CommandSeparator`	`<hr>`	Visual divider between groups or items
`CommandShortcut`	`<span>`	Keyboard shortcut label aligned to the right
`CommandLoading`	`<div>`	Loading indicator while results are fetched
`CommandDialog`	`<Dialog>`	Full-screen dialog wrapper for the command palette

Accessibility

The CommandInput renders a native <input> with role="combobox" and manages aria-expanded and aria-activedescendant automatically via cmdk.
CommandList has role="listbox" and each CommandItem has role="option".
CommandEmpty is announced to screen readers when visible.
Keyboard navigation: ↑/↓ moves between items, Enter selects, Escape dismisses when wrapped in CommandDialog.
Use CommandShortcut to display keyboard hints visually — these are decorative and do not bind keyboard events. Wire shortcuts yourself with useEffect or a keyboard library.

Command Palette

On this page