CommandPalette

Keyboard-driven command search overlay for quick navigation and action execution.

Examples

A simple command palette that filters a flat list as you type.

Results organised into labelled groups with separators.

Navigation

Dashboard

Projects

Reports

Actions

New project

Invite member

Export data

Shows recent items when the query is empty; switches to search results on input.

Recent

↩Dashboard

↩Settings

↩Project Alpha

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { CommandPalette } from "@rokle/components";

import { CommandPalette } from "@rokle/components";

export function Example() {
  return <CommandPalette />;
}

Prop	Type	Default	Description
commands	Command[]	-	List of available commands with label and action.
open	boolean	-	Whether the palette is visible.
onOpenChange	(open: boolean) => void	-	Called when open state changes.