Shadcn Command Examples: Command Palette Patterns for React
The shadcn command component is a fast, composable command menu for search and quick actions, the pattern popularized by Spotlight and the editors developers use daily. Built on the cmdk library and styled with Tailwind CSS, this react command palette filters items as you type, supports grouping and keyboard navigation, and runs on Radix UI and Base UI without extra work.
Here you will find 9 command menu examples ready to copy: basic lists, a grouped layout with section headings, filter tabs for switching result scopes, a footer with keyboard hints, and an item detail split view. All examples are TypeScript and integrate with Next.js routing out of the box.
Key features
- Fuzzy filtering built in: Typing instantly narrows the list using cmdk scoring, with no search index to configure.
- Grouping and separators: CommandGroup headings organize results into sections such as pages, actions, and settings.
- Full keyboard support: Arrow keys, Enter, and Escape work out of the box, and shortcuts can be displayed with CommandShortcut.
- Dialog mode: CommandDialog wraps the menu in a modal so a global hotkey like Cmd K can summon it anywhere.
- Composable panes: The filter tabs, footer, and item detail examples show how extra chrome fits around the core list.
Best practices
- Bind a global shortcut: Register Cmd K or Ctrl K in a top level effect so the palette is reachable from every screen.
- Order by likelihood: Put navigation and frequent actions first, and let groups push rare commands lower.
- Always render an empty state: CommandEmpty with a short message prevents a confusing blank panel when no results match.
- Keep labels verb first: Commands like Create project or Invite member scan faster than noun phrases.
- Close after execution: Run the action, close the dialog, and give feedback with a toast so the flow feels instant.
Common use cases
The global command palette react apps ship behind Cmd K is the headline use case: jump to any page, run actions, and search entities from one box. Admin dashboards use it as unified search across orders, customers, and settings, and the item detail example demonstrates previewing a result before committing to navigation.
The same primitives also power inline pickers. An asynchronous combobox is essentially a command list inside a popover, and many teams reuse the grouped variant as a searchable menu for assigning labels or moving items between projects. You can see palette-driven navigation wired into full admin screens in our dashboard blocks.
How it connects to other components
CommandDialog composes the menu with the dialog component for the modal experience, and results often deep link into pages that render a data table or detail view. Displaying shortcut hints alongside items pairs nicely with a tooltip on the trigger button that reminds users the palette exists.
Under the hood
Filtering, scoring, and keyboard behavior come from cmdk, a headless command menu library for React, while shadcn/ui supplies the Tailwind CSS styling documented in the command docs. Because cmdk is renderer-agnostic and the dialog wrapper is interchangeable, each command menu example on this page runs identically in Radix UI and Base UI based projects.