Styling

The components expose a stable cmdk-* attribute contract. The shipped stylesheet gives a sensible default driven by --cmdk-* tokens, so you re-theme by overriding a few variables, or target the attributes directly from plain CSS, SCSS or Tailwind.

[cmdk-scope-pill]Pinned scope in scoped search.

[cmdk-group-heading]Optional label for a group.

[cmdk-group]Wraps a set of related items.

[cmdk-item]A result row.

[cmdk-footer]Optional footer bar.

[cmdk-input]The search box. Filters as you type.

[data-selected]The active row (keyboard or pointer).

[cmdk-separator]Divider between sections.

[cmdk-footer-hint]Hint that tracks the selected row.

Every part, by selector

[cmdk-root]: The command menu container.
[cmdk-input]: The search input (a combobox).
[cmdk-list]: Scrollable results region. Animate height with the --cmdk-list-height variable.
[cmdk-group][cmdk-group-heading]: A group and its optional heading.
[cmdk-item]: A result. State hooks: [data-selected], [data-disabled].
[cmdk-separator]: A divider; hidden while searching unless always_render.
[cmdk-empty]: Shown when nothing matches.
[cmdk-loading]: Async loading indicator.
[cmdk-footer][cmdk-footer-hint]: Footer and its selection-driven hint (extension).
[cmdk-scope-pill]: The pinned scope chip. Carries [data-scope="name"], so you can style each scope and fall back to the bare selector (extension).

Build your base theme

Shape the default look by tuning its tokens; the preview updates live. Copy the light-dark() overrides as CSS or Tailwind and drop them on a class: 'cmdk' root. Statement looks like the CRT terminal and neo-brutalism are built with structure, not tokens, so they live on the Examples page instead.

Start from

Theme preview

Live preview