Navigation

Command Palette

Searchable list of commands and pages with keyboard navigation and shortcut hints, inline in a panel.

Pages
Product roadmapTeam/Projects
Weekly sync notesTeam/Meetings
Onboarding guide
Actions
New page
⌘N
Toggle dark mode
⌘⇧L
Open settings
⌘,
  • Navigate
  • Select
  • Close
Last chosen: nothing yet

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/CommandPaletteExample.tsx
import { useState } from 'react';
import { CommandPalette, type CommandGroup } from '@krackedui/motion';

const groups: CommandGroup[] = [
  { label: 'Pages', items: [
    { id: 'roadmap', title: 'Product roadmap', icon: 'file', keywords: 'plan goals', path: ['Team', 'Projects'] },
    { id: 'notes', title: 'Weekly sync notes', icon: 'file', path: ['Team', 'Meetings'] },
    { id: 'guide', title: 'Onboarding guide', icon: '📘' },
  ] },
  { label: 'Actions', items: [
    { id: 'new', title: 'New page', icon: 'plus', shortcut: '⌘N' },
    { id: 'theme', title: 'Toggle dark mode', icon: 'moon', keywords: 'appearance theme', shortcut: '⌘⇧L' },
    { id: 'settings', title: 'Open settings', icon: 'settings', shortcut: '⌘,' },
  ] },
];

export function InlinePalette() {
  const [picked, setPicked] = useState<string | null>(null);
  return (
    <div className="flex w-full max-w-xl flex-col gap-2">
      <div className="h-[360px] overflow-hidden rounded-n-2xl shadow-n-shadow-outline-lg">
        <CommandPalette groups={groups} placeholder="Search pages and actions…" onSelect={(item) => setPicked(item.id)} className="h-full" />
      </div>
      <div role="status" className="text-[12px] text-n-text-secondary">Last chosen: {picked ?? 'nothing yet'}</div>
    </div>
  );
}

Examples

Inline

Pages
Product roadmapTeam/Projects
Weekly sync notesTeam/Meetings
Onboarding guide
Actions
New page
⌘N
Toggle dark mode
⌘⇧L
Open settings
⌘,
  • Navigate
  • Select
  • Close
Last chosen: nothing yet

API Reference

CommandPalette

PropTypeDefault
groups
{ label: string; items: CommandItem[] }[]
onSelect
(item: CommandItem) => void
placeholder
string
"Search…"
inputLabel
string
emptyText
ReactNode
"No results"
filters
{ label: string; icon?: IconName; menu?: boolean; muted?: boolean; onClick?: () => void }[]
[]
hints
{ keys: ReactNode; label: string }[]
↑↓ Navigate, ↵ Select, esc Close
preview
boolean
false
defaultSelectedId
string
query
string
onQueryChange
(query: string) => void
autoFocus
boolean
false
headerEnd
ReactNode

Accessibility

  • The input is a WAI-ARIA combobox (aria-expanded, aria-controls, aria-autocomplete="list", aria-activedescendant) controlling an always-visible listbox; focus stays in the input.
  • Typing filters by title, keywords and path (every word must match). ↑/↓ move the highlight, Ctrl+Home / Ctrl+End jump to the ends, Enter runs the highlighted item.
  • Groups are labelled groups; options expose aria-selected for the highlighted one; disabled items are skipped.
  • When nothing matches, the empty text is announced through a status region.

Usage

  • Use to search and run many commands or jump to pages; for the ⌘K modal use CommandPaletteDialog.
  • Add keywords with synonyms so people find commands by the words they use.
  • Don't use it for a handful of actions: a Menu is easier to discover.
© 2026 Motion. Internal documentation.