Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA translucent command palette built on cmdk, with a large search field, grouped results with icons and an optional dialog toggled by Cmd+K.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
loop | boolean | true | Wrap arrow-key selection at the ends of the list. |
Also accepts all cmdk Command props.
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | "Search" | Placeholder text. |
trailing | React.ReactNode | - | Content at the end of the field, such as a key hint. |
Also accepts all cmdk Command.Input props.
| Prop | Type | Default | Description |
|---|---|---|---|
icon | React.ReactNode | - | Icon, drawn in a small rounded tile. |
iconClassName | string | - | Classes for the icon tile. |
detail | React.ReactNode | - | Secondary text at the end, such as a kind or shortcut. Not used for matching. |
Also accepts all cmdk Command.Item props (value, keywords, onSelect, disabled).
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controlled open state. |
defaultOpen | boolean | false | Initial open state when uncontrolled. |
onOpenChange | (open: boolean) => void | - | Called when the dialog opens or closes. |
hotkey | string | false | "k" | Key that toggles the dialog with Cmd or Ctrl. false turns it off. |
title | string | "Search" | Visually hidden dialog title. |
Also accepts all SpotlightSearch props. SpotlightSearchList, SpotlightSearchGroup, SpotlightSearchEmpty, SpotlightSearchSeparator and SpotlightSearchFooter wrap the matching cmdk parts or a <div>. useSpotlightHotkey(onTrigger, key) is exported for custom triggers.
Selection scrolls only the results list, never the page, so an inline palette below the fold stays put.