Skip to content

Search

CommandBar

ComponentNavigation Source

A sticky site bar whose prompt is a real input: it runs your Commands and searches for anything else, printing the output below the bar like a terminal. help lists the commands. / or ⌘K (Ctrl K) focuses it from anywhere on the page, the arrow keys move through results, Enter opens one and Escape clears. As in fish, what Tab would complete to shows faded after what's typed, and Tab or → at the end takes it.

CommandBar(props: CommandBarProps): Element

Props

commandsoptionalCommand[]
unavailableoptionalComponentChildren | (error: unknown) => ComponentChildren

Shown when the search fails. A function gets the error, so different failures can say different things.

authoroptionalAuthor

Defaults to defaultAuthor.

cwdoptionalstring

Shown as the prompt's working directory, such as the section being read.

homeoptionalstring

Where the author's photo links to. Defaults to /.

placeholderoptionalstring

Defaults to "search, or type help", or "type help" without a search.

actionsoptionalComponentChildren

Links or buttons beside the ThemeToggle.

classoptionalstring

design-system is a Ben Hodgson projectGitHub