Loading component…
Components /Search Modal
Minimalist command-palette search with live filtering, tags, and actions
Run the following command
npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/search-modal.json| Prop Name | Type | Default | Description |
|---|---|---|---|
| modal | boolean | false | Render as a centered overlay with a backdrop instead of an inline panel. |
| open | boolean | - | Controlled open state (modal mode). |
| defaultOpen | boolean | false | Uncontrolled initial open state (modal mode). |
| onOpenChange | (open: boolean) => void | - | Called when the modal opens (true) or closes (false). |
| hotkey | string | null | 'k' | Key (with ⌘/Ctrl) that toggles the modal. Set null to disable. |
| closeOnEscape | boolean | true | Close the modal when Escape is pressed. |
| overlayClassName | string | - | Classes for the overlay wrapper — override 'fixed' with 'absolute' to scope it. |
| placeholder | string | 'Search for action, people, instruments' | Placeholder for the search input. |
| tags | SearchTag[] | Sample set | Removable filter tags: { label, icon? }. |
| results | SearchResult[] | Sample set | Result rows (live-filtered): { name, meta?, avatar?, href?, actions? }. |
| quickActions | QuickAction[] | Sample set | Quick-action rows: { label, icon?, shortcut?, onClick? }. |
| files | SearchFile[] | Sample set | File rows: { name, ext?, icon?, verified?, onShare? }. |
| defaultQuery | string | '' | Initial query value. |
| onQueryChange | (query: string) => void | - | Called as the query changes. |
| onSelectResult | (result: SearchResult, index: number) => void | - | Called when a result row is clicked. |
| className | string | - | Additional classes for the root element. |