Components
Search Menu
A reusable command-palette search menu with grouped items, icons, descriptions, keyboard shortcut support, and a responsive search trigger.
Install
Add this registry item to your app with shadcn.
bash
bunx --bun shadcn@latest add https://krakstack.net/r/search-menu.jsonOverview
SearchMenu is a reusable command-palette component built on shadcn's Command primitive. Pass it grouped items and it renders a responsive search trigger, ⌘K/Ctrl+K shortcut handling, searchable groups, optional item icons, descriptions, and shortcuts. Labels are stored in the component file and can be overridden with props or the messages prop.
Features
- Generic grouped item input
- Optional item icons, descriptions, keywords, disabled state, and shortcuts
- Per-item
onSelecthandlers plus a top-levelonSelectcallback - Controlled or uncontrolled open state
- Mobile icon-only trigger and desktop search-bar trigger
Usage
tsx
import { SearchMenu, type SearchMenuGroup } from "@/components/ui/search-menu";
import { FileText, Settings } from "lucide-react";
const groups: SearchMenuGroup[] = [
{
heading: "Pages",
items: [
{
id: "docs",
label: "Docs",
description: "Open documentation",
icon: <FileText className="size-4" />,
onSelect: () => navigate({ to: "/docs" }),
},
],
},
{
heading: "Settings",
items: [
{
id: "profile",
label: "Profile",
icon: <Settings className="size-4" />,
},
],
},
];
<SearchMenu
groups={groups}
messages={{ title: "Search", description: "Search pages and actions." }}
/>Dependencies
Packages and shadcn components required by this registry item.