Command Palette

A searchable command palette for quick access to actions, navigation, and settings. Supports keyboard navigation, grouped items, and shortcut badges.

Live Preview

Click the button or press Ctrl+K / Cmd+K to open the command palette.

Installation

Install the package using your preferred package manager.

$ pnpm add @aidash/components

Import

Import the component and types into your file.

tsx

import { AidashCommand, type CommandItem, type CommandGroup } from '@/components/aidash/command';

Basic Usage

A simple command palette with a flat list of items.

tsx

const [open, setOpen] = useState(false);

const items: CommandItem[] = [
  { id: '1', label: 'New File', onSelect: () => console.log('New File') },
  { id: '2', label: 'Open Settings', onSelect: () => console.log('Settings') },
  { id: '3', label: 'Search Projects', onSelect: () => console.log('Search') },
];

<AidashCommand
  open={open}
  onOpenChange={setOpen}
  items={items}
/>

Grouped Items

Organize commands into groups with headings for better discoverability.

tsx

const groups: CommandGroup[] = [
  {
    heading: 'Actions',
    items: [
      { id: 'a1', label: 'Create New Project', onSelect: () => {} },
      { id: 'a2', label: 'Import from GitHub', onSelect: () => {} },
      { id: 'a3', label: 'Deploy Application', onSelect: () => {} },
    ],
  },
  {
    heading: 'Navigation',
    items: [
      { id: 'n1', label: 'Go to Dashboard', onSelect: () => {} },
      { id: 'n2', label: 'Go to Settings', onSelect: () => {} },
    ],
  },
  {
    heading: 'Settings',
    items: [
      { id: 's1', label: 'Theme Preferences', onSelect: () => {} },
      { id: 's2', label: 'Notification Settings', onSelect: () => {} },
    ],
  },
];

<AidashCommand
  open={open}
  onOpenChange={setOpen}
  groups={groups}
  placeholder="What do you need?"
/>

Keyboard Shortcuts

Display keyboard shortcut badges alongside command items.

tsx

const items: CommandItem[] = [
  { id: '1', label: 'New File', shortcut: 'Ctrl+N', onSelect: () => {} },
  { id: '2', label: 'Open File', shortcut: 'Ctrl+O', onSelect: () => {} },
  { id: '3', label: 'Save', shortcut: 'Ctrl+S', onSelect: () => {} },
  { id: '4', label: 'Find', shortcut: 'Ctrl+F', onSelect: () => {} },
];

<AidashCommand open={open} onOpenChange={setOpen} items={items} />

Search Filtering

Built-in search filters items in real-time as you type.

tsx

// The search is built-in — just provide items.
// Try typing "type" to find TypeScript, or "py" for Python.

const items: CommandItem[] = [
  { id: '1', label: 'JavaScript', onSelect: () => {} },
  { id: '2', label: 'TypeScript', onSelect: () => {} },
  { id: '3', label: 'Python', onSelect: () => {} },
  { id: '4', label: 'Rust', onSelect: () => {} },
  // ...
];

<AidashCommand
  open={open}
  onOpenChange={setOpen}
  items={items}
  placeholder="Filter languages..."
/>

Custom Empty State

Customize the message displayed when no items match the search query.

Open and type something that does not match any item.

tsx

<AidashCommand
  open={open}
  onOpenChange={setOpen}
  items={items}
  emptyMessage="Nothing here. Try a different search term."
/>

With Icons

Add icons to command items for better visual recognition.

tsx

import { HugeiconsIcon } from '@hugeicons/react';
import { Search01Icon, File01Icon, PlusSignIcon, Delete01Icon, Home01Icon, UserIcon, Settings01Icon, BellIcon, Mail01Icon } from '@hugeicons/core-free-icons';

const groups: CommandGroup[] = [
  {
    heading: 'Quick Actions',
    items: [
      { id: '1', label: 'Search', icon: <HugeiconsIcon icon={Search01Icon} size={16} />, shortcut: 'Ctrl+K', onSelect: () => {} },
      { id: '2', label: 'New Document', icon: <HugeiconsIcon icon={File01Icon} size={16} />, shortcut: 'Ctrl+N', onSelect: () => {} },
      { id: '3', label: 'Add Item', icon: <HugeiconsIcon icon={PlusSignIcon} size={16} />, onSelect: () => {} },
      { id: '4', label: 'Delete', icon: <HugeiconsIcon icon={Delete01Icon} size={16} />, onSelect: () => {}, disabled: true },
    ],
  },
  {
    heading: 'Navigate',
    items: [
      { id: '5', label: 'Home', icon: <HugeiconsIcon icon={Home01Icon} size={16} />, onSelect: () => {} },
      { id: '6', label: 'Profile', icon: <HugeiconsIcon icon={UserIcon} size={16} />, onSelect: () => {} },
      { id: '7', label: 'Settings', icon: <HugeiconsIcon icon={Settings01Icon} size={16} />, onSelect: () => {} },
    ],
  },
];

<AidashCommand open={open} onOpenChange={setOpen} groups={groups} />

Props API

Complete reference for all component props.

AidashCommand Props

Prop	Type	Default	Description
open	boolean	false	Whether the command palette is open
onOpenChange	(open: boolean) => void	—	Callback when open state changes
placeholder	string	'Type a command or search...'	Search input placeholder text
items	CommandItem[]	[]	Flat list of command items
groups	CommandGroup[]	[]	Grouped command items with headings
emptyMessage	string	'No results found.'	Message shown when no items match the query
className	string	''	Additional CSS classes for the panel

CommandItem

Prop	Type	Default	Description
id	string	—	Unique identifier for the item
label	string	—	Display label for the item
icon	ReactNode	—	Optional icon rendered before the label
shortcut	string	—	Keyboard shortcut display (e.g. 'Ctrl+K')
onSelect	() => void	—	Callback when the item is selected
disabled	boolean	false	Whether the item is disabled

CommandGroup

Prop	Type	Default	Description
heading	string	—	Group heading text
items	CommandItem[]	—	Array of items in this group

Accessibility

Built-in keyboard navigation and ARIA support.

Arrow Up / Down — Navigate between items in the list
Enter — Select the currently highlighted item
Escape — Close the command palette
Ctrl+K / Cmd+K — Toggle the command palette globally
ARIA — Uses role="dialog", aria-modal, and role="listbox" for screen readers
Focus Trap — Auto-focuses the search input when opened

Components that work well alongside the Command Palette.

Dialog

Modal dialogs for confirmations and forms

Input

Text input with search functionality

Select

Dropdown selection component

Popover

Floating content panels