Command Palette

⌘K-style command menu. Free, MIT · Navigation and layout › Menus and commands

Installation

npx valyro-cli@latest add command-palette

npx shadcn@latest add https://valyro.xyz/r/command-palette.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { CommandPalette } from 'valyro-ui';

Prop	Type	Default
`commands`	`CommandPaletteItem[]`		Searchable commands, listed under their group headings and filtered by label and keywords. Or compose them as children: `CommandPalette.Group` and `CommandPalette.Item`.
`children`	`ReactNode`		The compound form instead of `commands`: `CommandPalette.Item` elements, alone or in `CommandPalette.Group`s.
`open`	`boolean`		Controlled open state of the modal palette. Ignored when `inline`.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled. Ignored when `inline`.
`onOpenChange`	`(open: boolean) => void`		Called when the modal palette opens or closes.
`inline`	`boolean`	`false`	Render the palette in the page flow instead of a modal: always open, no scrim or focus trap, Escape clears the query. For a command menu embedded in a page or a panel (a launcher, a search page).
`placeholder`	`string`	`'Type a command or search…'`	Placeholder of the search field.
`renderEmpty`	`(query: string) => ReactNode`	(query) => (query ? `No results for “${query}”` : 'No commands')	Shown when nothing matches; receives the trimmed query.
`labels`	`Partial<CommandPaletteLabels>`		Overrides for the built-in English strings.

CommandPalette.Item (CommandPaletteItemPart), CommandPalette.Group (CommandPaletteGroup)

Dropdown Menu — Dropdown menu
Context Menu — Right-click menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode
App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Tabs — Tabs
Segmented Control — Mode switcher
Pagination — Page navigation
Stepper — Step-by-step progress