Command Palette

A modal search dialog for navigating and executing commands quickly. Items are filtered as you type. Groups by category.

Molecule

Dialog · Input · Icon · Kbd

When To Use

Use Command Palette when content needs to appear in context without forcing a full page transition.
Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

Move focus into the overlay when it opens and return focus to the trigger when it closes.
Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.

Key Props / API

Props

open, onClose, items, placeholder, emptyText

Example Code

import { CommandPalette } from "@hilum/ui"
import { LayoutDashboard, Users } from "lucide-react"

const commands = [
  { id: 1, label: "Dashboard", icon: <LayoutDashboard size={15} />, category: "Navigation", href: "/dashboard" },
  { id: 2, label: "Team members", icon: <Users size={15} />, category: "Navigation", href: "/team" },
  { id: 3, label: "New document", icon: <FileText size={15} />, category: "Actions", onSelect: () => {} },
]

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

  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen(true)
      }
// ...trimmed for docs

Command Palette · Basic

Searchable command list

Grouped by category, filtered as you type

or press ⌘K