Component

CommandSearch

Build a modal command palette with grouped results, filtering, keyboard navigation, and optional shortcut.

Usage

Import the component entry and start with its smallest complete example.

Import

import { CommandSearch } from "@chitrank2050/monoline-ui/command-search"

Basic usage

<CommandSearch
  open={open}
  onOpenChange={setOpen}
  placeholder="Search docs or actions..."
  showFooter
>
  <CommandSearch.Input />
  <CommandSearch.List>
    <CommandSearch.Group heading="Documentation">
      <CommandSearch.Item value="navbar component" onSelect={() => navigate("/navbar")}>
        Navbar Component
      </CommandSearch.Item>
      <CommandSearch.Item value="select component" onSelect={() => navigate("/select")}>
        Select Component
      </CommandSearch.Item>
    </CommandSearch.Group>
    <CommandSearch.Empty />
  </CommandSearch.List>
</CommandSearch>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

CommandSearch suits a controlled, keyboard-driven search or command palette with filterable actions.

Avoid when

Search should stay visible on the page or results exist only on the server with no client controller.

Accessibility

CommandSearch delegates command-list semantics to cmdk and closes on Escape, while the caller must provide an accessible opener and restore focus when the portal closes.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

openbooleanControlled modal open state

onOpenChange(open: boolean) => voidFires when open state changes

shortcutstring | falseKeyboard shortcut to toggle open state (default: 'k')

debouncenumber | falseQuery change event debouncing in ms (default: 200)

minCharsnumberMin characters to trigger filtering (default: 1)

placeholderstringPlaceholder text inside search input

shouldFilterbooleanEnables local fuzzy search/filtering on items (default: true)

showFooterbooleanEnables default footer rendering with keyboard hints (default: false)

CommandSearch.InputCompound ComponentText input element

CommandSearch.ListCompound ComponentScrollable list container

CommandSearch.GroupCompound ComponentVisual grouping container with a heading prop

CommandSearch.ItemCompound ComponentSelectable list option (requires a value string)

CommandSearch.EmptyCompound ComponentFallback displayed when no items match

CommandSearch.FooterCompound ComponentCustomizable footer container for keyboard hints or actions

Design tokens

Theme variables this component reads for color, spacing, and motion.

--background / --cardCSS varModal surface backgrounds

--borderCSS varInput and divider borders

--accentCSS varHighlighted option hover treatment

--font-monoCSS varBadge / shortcut kbd fonts

Implementation

The source used by the example above, including any state it needs.

import { useState } from "react"
import { Button } from "@chitrank2050/monoline-ui/button"
import { CommandSearch } from "@chitrank2050/monoline-ui/command-search"

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

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Palette</Button>
      <CommandSearch
        open={open}
        onOpenChange={setOpen}
        placeholder="Type to search..."
        shortcut={false} // Disable global shortcut to prevent page conflicts
      >
        <CommandSearch.Input />
        <CommandSearch.List>
          <CommandSearch.Group heading="Links">
            <CommandSearch.Item value="home" onSelect={() => navigate("/home")}>
              Home
            </CommandSearch.Item>
            <CommandSearch.Item value="about" onSelect={() => navigate("/about")}>
              About
            </CommandSearch.Item>
          </CommandSearch.Group>
          <CommandSearch.Empty />
        </CommandSearch.List>
        {/* Render the default footer layout */}
        <CommandSearch.Footer />
      </CommandSearch>
    </>
  )
}

Compare related components or review the package and theme setup.

01ComponentInputComponent · ReferenceReference→02ComponentResources PanelComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview