Skip to main content
CommandPalette provides a searchable command menu with keyboard shortcuts, groups, and rich item composition. Built using cmdk and Base UI Dialog.

​
Installation

npm install @soft-ui/react

​
Usage

import { CommandPalette } from "@soft-ui/react/command-palette"
import { RiSearchLine } from "@soft-ui/icons"

function Example() {
  const [open, setOpen] = useState(false)

  return (
    <CommandPalette.Root open={open} onOpenChange={setOpen}>
      <CommandPalette.Trigger>Open Command Palette</CommandPalette.Trigger>
      <CommandPalette.Content>
        <CommandPalette.Input placeholder="Search..." />
        <CommandPalette.List>
          <CommandPalette.Group>
            <CommandPalette.GroupHeading>Actions</CommandPalette.GroupHeading>
            <CommandPalette.Item>
              <CommandPalette.ItemPrefix><RiSearchLine /></CommandPalette.ItemPrefix>
              <CommandPalette.ItemLabel>Search</CommandPalette.ItemLabel>
            </CommandPalette.Item>
          </CommandPalette.Group>
        </CommandPalette.List>
        <CommandPalette.Footer />
      </CommandPalette.Content>
    </CommandPalette.Root>
  )
}

​
API Reference

​
CommandPalette.Root

​
open
boolean
Controlled open state
​
defaultOpen
boolean
Uncontrolled default open state
​
onOpenChange
(open: boolean) => void
Callback when open state changes
​
enableKeyboardShortcut
boolean
default:"false"
Enable ⌘K / Ctrl+K global keyboard shortcut to open

​
CommandPalette.Trigger

​
className
string
Additional CSS classes

​
CommandPalette.Content

​
className
string
Additional CSS classes for the popup

​
CommandPalette.Input

​
placeholder
string
Placeholder text for the search input
​
loading
boolean
Show loading spinner instead of search icon
​
className
string
Additional CSS classes

​
CommandPalette.List

​
className
string
Additional CSS classes for the scrollable list container

​
CommandPalette.Empty

​
className
string
Additional CSS classes
Displays when no results match the search query. Defaults to “No results found” message.

​
CommandPalette.Group

​
className
string
Additional CSS classes

​
CommandPalette.GroupHeading

​
className
string
Additional CSS classes

​
CommandPalette.Item

​
value
string
Value used for search filtering
​
keywords
string[]
Additional keywords for search
​
onSelect
() => void
Callback when item is selected
​
disabled
boolean
Whether the item is disabled
​
className
string
Additional CSS classes

​
CommandPalette.ItemPrefix

​
variant
'icon' | 'avatar' | 'emphasized'
default:"'icon'"
Visual style of the prefix:
  • icon: Simple icon with subtle color
  • avatar: Avatar-sized container
  • emphasized: Colored background badge
​
color
DecorativeColor
default:"'neutral'"
Color for emphasized variant (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, neutral)
​
className
string
Additional CSS classes

​
CommandPalette.ItemLabel

​
className
string
Additional CSS classes

​
CommandPalette.ItemSuffix

​
className
string
Additional CSS classes

​
CommandPalette.Separator

​
className
string
Additional CSS classes
​
className
string
Additional CSS classes
Defaults to keyboard navigation hints (↑↓, Enter, Esc).

​
Examples

​
With Groups

<CommandPalette.Root>
  <CommandPalette.Trigger>Open</CommandPalette.Trigger>
  <CommandPalette.Content>
    <CommandPalette.Input placeholder="Type a command..." />
    <CommandPalette.List>
      <CommandPalette.Group>
        <CommandPalette.GroupHeading>Navigation</CommandPalette.GroupHeading>
        <CommandPalette.Item>
          <CommandPalette.ItemLabel>Home</CommandPalette.ItemLabel>
        </CommandPalette.Item>
      </CommandPalette.Group>
      <CommandPalette.Separator />
      <CommandPalette.Group>
        <CommandPalette.GroupHeading>Actions</CommandPalette.GroupHeading>
        <CommandPalette.Item>
          <CommandPalette.ItemLabel>Create</CommandPalette.ItemLabel>
        </CommandPalette.Item>
      </CommandPalette.Group>
    </CommandPalette.List>
  </CommandPalette.Content>
</CommandPalette.Root>

​
With Emphasized Items

<CommandPalette.Item>
  <CommandPalette.ItemPrefix variant="emphasized" color="blue">
    <RiFileIcon />
  </CommandPalette.ItemPrefix>
  <CommandPalette.ItemLabel>New File</CommandPalette.ItemLabel>
  <CommandPalette.ItemSuffix>
    <Kbd>⌘</Kbd><Kbd>N</Kbd>
  </CommandPalette.ItemSuffix>
</CommandPalette.Item>

​
With Keyboard Shortcut

<CommandPalette.Root enableKeyboardShortcut>
  {/* Content */}
</CommandPalette.Root>

​
Loading State

<CommandPalette.Input placeholder="Searching..." loading />

​
Custom Empty State

<CommandPalette.Empty>
  <p>No commands found.</p>
  <p>Try a different search term.</p>
</CommandPalette.Empty>

Build docs developers (and LLMs) love

Get started for freeTalk to us