Command

Search-first command palette surface for app navigation, shortcuts, and filtered action discovery with a small set of composable subcomponents.

AccessibleDark ModeKeyboard Nav

Install

$npx react-principles add command

Live Demo

Open in Storybookopen_in_new

Navigation

Actions

Code Snippet

src/ui/Command.tsx

import { Command } from "@/ui/Command";

<Command>
  <Command.Input placeholder="Search commands..." />
  <Command.List>
    <Command.Group>
      <Command.Label>Navigation</Command.Label>
      <Command.Item value="go-home">Go to home</Command.Item>
      <Command.Item value="open-docs">Open docs</Command.Item>
    </Command.Group>
  </Command.List>
</Command>

Copy-Paste (Single File)

Command.tsx

import { createContext, useContext, useMemo, useState, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react";
import { cn } from "@/lib/utils";

interface CommandContextValue {
  query: string;
  setQuery: (query: string) => void;
}

Props

Prop	Type	Default	Description
`Command.Input`	`InputHTMLAttributes<HTMLInputElement>`	`—`	Search field bound to the internal command query state.
`Command.List`	`HTMLAttributes<HTMLDivElement>`	`—`	Scrollable container for filtered command groups and items.
`Command.Item.value`	`string`	`—`	Primary searchable string used for filtering the item.
`Command.Item.keywords`	`string[]`	`—`	Additional search terms matched against the current query.
`Command.Group`	`HTMLAttributes<HTMLDivElement>`	`—`	Logical grouping wrapper for related command items.
`Command.Label`	`HTMLAttributes<HTMLParagraphElement>`	`—`	Uppercase section label for a command group.
`Command.Separator`	`HTMLAttributes<HTMLDivElement>`	`—`	Visual divider between command groups.
`Command.Empty`	`{ className?: string; children?: ReactNode }`	`"No results"`	Fallback message shown when the query has no matches.

react-principles