Command Search

Overview

A command palette that types queries and live-filters grouped results, with keyboard navigation.

This input component is intended for interfaces that need a command palette that types queries and live-filters grouped results, with keyboard navigation, forms, and search workflows. Its implementation is provided as editable source so the final behavior and styling stay inside your project.

Technologies

React
TypeScript
Tailwind CSS
Motion

Detected package dependencies: motion, lucide-react.

@spectrumui/command-search
Search…

Pages

Components

NavigateSelect

Installation

Login to view commandCreate a free account to access the install command

Usage

import { CommandSearch } from "@/components/spectrumui/command-search"
<CommandSearch
  queries={["chart", "button", "pricing"]}
  onSelect={(item) => console.log(item.label)}
/>

API Reference

CommandSearch

Renders a listbox with a search field on top. By default it types each entry of queries into the field and filters groups as it goes; the typing pauses while the palette is off-screen. Arrow keys move the highlight and Enter selects.

PropTypeDefaultDescription
groups{ label: string; items: { label: string; icon?: ReactNode }[] }[]-Grouped results rendered below the search field
queriesstring[]-Queries the palette types out and live-filters by
autoTypebooleantrueType the queries automatically; set false to show a static query
querystring"anim"Static text for the search field when autoType is false
placeholderstring"Search…"Placeholder shown while the field is empty
onSelect(item: CommandSearchItem) => void-Called with the item when a row is clicked or chosen with Enter
heightnumber408Fixed height of the palette; overflowing results are clipped
classNamestring-Additional classes merged with the root styles

Use cases

  • interfaces that need a command palette that types queries and live-filters grouped results, with keyboard navigation
  • forms
  • search workflows

Features

  • Copy-paste source that remains in your repository
  • TypeScript source included with the component
  • Tailwind CSS classes editable in the component source
  • Animation implemented with Motion
  • Spectrum UI registry dependencies: @spectrumui/use-typewriter

Accessibility

  • The source includes ARIA attributes or roles; preserve them when customizing the component.
  • The source includes keyboard event handling; verify it alongside pointer behavior.
  • No reduced-motion marker was detected; add or verify a reduced-motion path before production use.
  • Test focus order, keyboard operation, labels, contrast, and screen-reader output in the final application context.

Customization

  • Edit the Tailwind utility classes in the copied source to match your spacing, color, and typography tokens.
  • Use the documented className surface for local layout adjustments, then edit the source for structural changes.
  • Adjust Motion transitions in the source and keep the reduced-motion behavior aligned with the final interaction.

Related components

Beam Search Bar
A search bar whose bottom edge lights up with a traveling beam while it has focus.
Kbd Key
A 3D keycap that physically depresses when the matching key is pressed.
Metal Prompt Bar
An AI prompt bar with a live liquid-metal send button that reflects onto the chips beside it.
Account Access Card
A credentials card that auto-fills email and password on a loop, with a danger zone.

Command Search FAQ

Is Command Search free to use in commercial projects?

Yes. The public Command Search source is available under the Apache License 2.0, including for commercial use, subject to the LICENSE terms.

How do I install Command Search?

Run npx shadcn@latest add @spectrumui/command-search. The page also exposes the source for manual installation.

Does Command Search require Motion?

Yes. Motion usage was detected in the documented source or registry dependencies for Command Search.

Does Command Search use shadcn/ui or Radix UI?

No shadcn/ui or Radix UI dependency was detected in the documented Command Search source.

Can I use Command Search in Next.js?

The documented React source is used in this Next.js application. Keep its use client directive when copying it into the App Router. Install the detected dependencies and verify any application-specific data or image configuration.

What accessibility checks should I run for Command Search?

The source includes ARIA markup, keyboard handlers. Test the finished interface with keyboard and screen-reader workflows.

Work with me