Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA command palette with pages: a search-field style trigger, grouped commands, drill-in pages with a breadcrumb, Backspace to go back and a footer of key hints.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
groups | CommandBarGroup[] | - | Top-level groups of commands. |
open | boolean | - | Controlled open state. |
defaultOpen | boolean | false | Initial open state when uncontrolled. |
onOpenChange | (open: boolean) => void | - | Called when the bar opens or closes. |
placeholder | string | "Search commands…" | Placeholder of the search field on the first page. |
emptyText | string | "No results found." | Text shown when nothing matches. |
hotkey | string | false | "k" | Key that toggles the bar with ⌘ or Ctrl. false turns it off. |
trigger | string | false | "Search or jump to…" | Text on the trigger button. false hides it. |
triggerClassName | string | - | Class names for the trigger. |
title | string | "Command bar" | Accessible name of the dialog. |
| Field | Type | Description |
|---|---|---|
id | string | Unique id. |
label | string | Visible name. |
description | string | Muted second line. |
icon | ReactNode | Leading icon. |
shortcut | string[] | Keys shown at the end. Display only. |
keywords | string[] | Extra words the search matches. |
onSelect | () => void | Runs when chosen; the bar then closes. |
keepOpen | boolean | Keeps the bar open after onSelect. |
pages | CommandBarGroup[] | Choosing the item opens a second page with these groups. |
hotkey that doesn't clash with your site's own shortcuts.