Hewn
Components

Components

CommandPalette

Modal ⌘K command finder with grouped actions, shortcuts, and async loading.

newfree

Install

@hewnui/ui · @hewnui/themes · hewnui

Terminal
npm install @hewnui/ui @hewnui/themes
Terminal
pnpm add @hewnui/ui @hewnui/themes
Terminal
yarn add @hewnui/ui @hewnui/themes
Terminal
bun add @hewnui/ui @hewnui/themes
Terminal
npx hewnui@latest add command-palette

First install? Follow Getting started for peers, CSS and providers.

CommandPalette pairs a dialog trigger with React Aria Autocomplete and Menu. Filter grouped commands, show shortcut hints, and wire an optional global hotkey.

Press Ctrl+J on this page. Ctrl/⌘K is taken by docs search here; in your app the hook defaults to ⌘K / Ctrl+K.

Usage

TSX
import { useState } from "react";
import {
  Button,
  CommandPalette,
  CommandPaletteGroup,
  CommandPaletteInput,
  CommandPaletteItem,
  CommandPaletteList,
  CommandPaletteTrigger,
  commandPaletteHotkeyLabel,
  useCommandPaletteHotkey,
} from "@hewnui/ui";

const [isOpen, setOpen] = useState(false);
// Docs search owns ⌘/Ctrl+K on this site — demos use J instead.
useCommandPaletteHotkey({ key: "j", onOpenChange: setOpen });

<CommandPaletteTrigger isOpen={isOpen} onOpenChange={setOpen}>
  <Button>Commands</Button>
  <CommandPalette>
    <CommandPaletteInput />
    <CommandPaletteList>
      <CommandPaletteGroup heading="Actions">
        <CommandPaletteItem
          id="new"
          shortcut={commandPaletteHotkeyLabel("n")}
          textValue="New file"
        >
          New file
        </CommandPaletteItem>
      </CommandPaletteGroup>
    </CommandPaletteList>
  </CommandPalette>
</CommandPaletteTrigger>

States

  • Loading — CommandPaletteList isLoading shows a polite status with spinner
  • Empty — filtered Menu renderEmptyState via emptyLabel
  • Disabled — CommandPaletteItem isDisabled

Accessibility

  • Dialog role with an accessible name; focus moves into the search field on open
  • Escape and outside click dismiss; focus returns to the trigger
  • Arrow keys move between commands; Enter activates; typeahead filtering via Autocomplete
  • Shortcut hints use the Keyboard element; icons are presentational
  • Reduced motion: enter/exit transitions fall back with motion-reduce

Hotkey on this page

Press Ctrl+J (⌘J on Mac) on this page. Ctrl/⌘K is taken by docs search here; in your app the hook defaults to ⌘K / Ctrl+K.

API reference

Props for CommandPalette from @hewnui/ui/command-palette. Generated from component types — not hand-written.

Prop

Type

CommandPaletteTrigger

Props for CommandPaletteTrigger.

Prop

Type

CommandPaletteInput

Props for CommandPaletteInput.

Prop

Type

CommandPaletteList

Props for CommandPaletteList.

Prop

Type

CommandPaletteGroup

Props for CommandPaletteGroup.

Prop

Type

CommandPaletteItem

Props for CommandPaletteItem.

Prop

Type

CommandPaletteRecent

Props for CommandPaletteRecent.

Prop

Type

Empty

Status region for lists and tables with nothing to show.

Stepper

Multi-step progress indicator with horizontal and vertical orientations.

On this page

UsageStatesAccessibilityHotkey on this page