Overlays

Command Palette

cmdk inside Dialog: fuzzy search, grouped results with icons, shortcuts and descriptions, loading/empty states and keyboard hints.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

import { Button } from "@nibapp/ui/components/button";import { CommandPalette, CommandPaletteGroup, CommandPaletteItem, CommandPaletteSeparator, useCommandPalette } from "@nibapp/ui/components/command-palette";import { Shortcut } from "@nibapp/ui/components/kbd";

Props

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

Button

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost" \| "quiet" \| "danger" \| "danger-ghost" \| "link"	"secondary"	primary Neutral ink: the main call to action. Actions are ink, never the accent. secondary Quiet surface with a hairline — the default for most actions. ghost No chrome until hovered — toolbars, inline actions. quiet Words that are also an action, in the text's own weight and laid out from the start, so they line up with the text around them: `xs` in a line (a header's crumbs, a title that renames), `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link). danger Destructive confirmation. danger-ghost Destructive but low emphasis. link Inline text action.
size	"xs" \| "sm" \| "md" \| "lg"	"md"
block	boolean	—
truncate	boolean	—	The button may shrink below its label's width; the label then truncates with an ellipsis.
wrap	boolean	—	The label wraps onto more lines and the button grows, its `leading` icon on the first line: for words that are an action and may run long in another language (a tip). One line keeps the size.
loading	boolean	false	Shows a spinner, keeps the button's width, and blocks interaction.
leading	ReactNode	—	Icon rendered before the label.
trailing	ReactNode	—	Icon or hint (e.g. <Kbd>) rendered after the label.
disabledReason	string \| undefined	—	Disables the button and says why: the reason is its tooltip and its accessible description, and the button stays focusable (`aria-disabled`) so a keyboard reaches it.

Also takes .

CommandPalette

Raycast-style launcher: big search, grouped results, keyboard hints. Pair with `useCommandPalette`.

Prop	Type	Default	Description
open (required)	boolean	—
onOpenChange (required)	(open: boolean) => void	—
children (required)	ReactNode	—	Groups / items / separators.
placeholder	string	—
label	string	—	Accessible name for the dialog and listbox.
loading	boolean	false	Shows a spinner in the input and a loading row in the list (async results).
search	string	—	Controlled query (e.g. to fetch async results); cleared when the palette closes.
onSearchChange	(search: string) => void	—
shouldFilter	boolean	—	Disable cmdk's built-in fuzzy filter when results are filtered server-side.
empty	(search: string) => ReactNode	—	Custom empty state; receives the current query.
footer	ReactNode	—	Left side of the footer (e.g. the current workspace).
className	string	—

CommandPaletteGroup

Titled section; pass `heading`. Hidden automatically when none of its items match.

Also takes ComponentProps<typeof Command.Group>.

CommandPaletteItem

Prop	Type	Default	Description
children (required)	ReactNode	—
icon	ReactNode	—
description	ReactNode	—	Secondary line (path, model id, hint).
shortcut	readonly string[]	—	Logical keys, e.g. `["mod", "n"]`.
trailing	ReactNode	—	Trailing adornment (badge, "Jump to" hint…).

Also takes ComponentProps<typeof Command.Item>, except children.

CommandPaletteSeparator

Also takes ComponentProps<typeof Command.Separator>.

Shortcut

A key combination rendered as keycaps with platform-aware glyphs. The keycaps are always `aria-hidden`; at most one spoken form exists (the `spoken` words), never glyphs plus words.

Prop	Type	Default	Description
size	"sm" \| "md"	"md"
bare	boolean	—	`bare` drops the keycap chrome — for hints inside menus and buttons.
keys (required)	readonly string[]	—	Logical keys, e.g. `["mod", "k"]` → ⌘K on macOS, Ctrl K elsewhere.
spoken	boolean	false	Announce the chord in words ("Command K"). Off by default: a shortcut inside a button, menu item or tooltip is announced through the control's `aria-keyshortcuts` (see `ariaKeyShortcuts`), so its name doesn't double up as "New document⌘N⌘N". Turn on for standalone hints and shortcut lists, where the keys are the content.

Also takes the props of a <span> element, except children.