← All components System & power-user

CommandPalette

Linear-grade ⌘K palette. Fuzzy search, sticky group headers, kbd shortcuts right-aligned, full keyboard nav.

Inspired by Linear command palette, Raycast, VSCode quick-open.

Preview

What it looks like.

⌘K opens. Type to filter. Arrow keys to navigate. Enter to run.

or press ⌘K (the demo binds it while you're hovered over this frame)

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { CommandPalette } from '@locara/components'

const [open, setOpen] = useState(false)
useEffect(() => {
  const onKey = (e) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault()
      setOpen((o) => !o)
    }
  }
  window.addEventListener('keydown', onKey)
  return () => window.removeEventListener('keydown', onKey)
}, [])

<CommandPalette
  open={open}
  onOpenChange={setOpen}
  onSelect={(item) => router.push(item.id)}
  items={[
    { id: 'go-home', label: 'Go to home', description: 'Return to the app\'s main view', group: 'Navigate', shortcut: ['G', 'H'] },
    { id: 'go-settings', label: 'Go to settings', description: 'Adjust model, theme, capabilities', group: 'Navigate', shortcut: ['G', 'S'] },
    { id: 'new-chat', label: 'New chat', description: 'Start a fresh conversation', group: 'Actions', shortcut: ['⌘', 'N'] },
    { id: 'dictate', label: 'Start dictation', description: 'Capture voice and transcribe locally', group: 'Actions', shortcut: ['⌘', '⇧', 'D'] },
  ]}
/>

Or copy the source into your repo: locara add command-palette

Design notes

Why it works this way.

Linear's command palette is the gold standard. We mirror the row layout (icon · label · description · shortcut), sticky group headers, and the keyboard model (↑/↓/Enter/Esc). Performance target is sub-50ms-open. Items are passed flat; grouping is derived from the optional `group` field so consumers don't need a special nested structure.