Command Palette

A keyboard-first command palette built on cmdk. Supports grouped results, fuzzy search, empty states, and dialog presentation. Bind it to ⌘K for a native feel.

Click the button to open the palette

import { CommandPalette } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add command-palette

Import

import.tsx

import {
  CommandPaletteDialog,
  CommandPalette,
  CommandPaletteInput,
  CommandPaletteList,
  CommandPaletteEmpty,
  CommandGroup,
  CommandItem,
} from "@aetherstack/patterns"

Usage

command-palette.tsx

import * as React from "react"
import {
  CommandPaletteDialog,
  CommandPalette,
  CommandPaletteInput,
  CommandPaletteList,
  CommandPaletteEmpty,
  CommandGroup,
  CommandItem,
} from "@aetherstack/patterns"

export function MyCommandPalette() {
  const [open, setOpen] = React.useState(false)

  // Bind to ⌘K / Ctrl+K
  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((v) => !v)
      }
    }
    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [])

  return (
    <CommandPaletteDialog open={open} onOpenChange={setOpen}>
      <CommandPalette>
        <CommandPaletteInput placeholder="Search commands…" />
        <CommandPaletteList>
          <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
          <CommandGroup heading="Pages">
            <CommandItem onSelect={() => setOpen(false)}>Dashboard</CommandItem>
            <CommandItem onSelect={() => setOpen(false)}>Settings</CommandItem>
          </CommandGroup>
        </CommandPaletteList>
      </CommandPalette>
    </CommandPaletteDialog>
  )
}

Props

Prop	Type	Default	Description
open*	boolean	—	Controls dialog visibility (CommandPaletteDialog).
onOpenChange*	(open: boolean) => void	—	Called when the dialog open state should change.
children*	ReactNode	—	Compose CommandPalette, CommandPaletteInput, CommandPaletteList etc. inside.
className	string	—	Additional classes on the CommandPrimitive root.

* Required

Accessibility

→Built on cmdk which handles full keyboard navigation: Arrow keys, Enter to select, Escape to dismiss.
→The dialog traps focus and restores it on close.
→Results list is a live region — screen readers announce matches as you type.
→Group headings are rendered with proper semantics via cmdk internals.