import { Command } from "@elabs-ai/components-ui";npm install @elabs-ai/components-tokens @elabs-ai/components-uiPrompt for your coding agent
Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui Command component (from @elabs-ai/components-ui) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look Command up before writing code: `npx -y @elabs-ai/components-cli docs Command` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-ui is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Examples
Command Dialog (⌘K)
A ⌘K command palette in a dialog, opened by shortcut or button.
Groups, icons & shortcuts
An inline menu with grouped items, leading icons, separators and shortcuts.
Scrollable
A long list inside the `CommandList`'s built-in scroll region (max-h 300px).
Inline list below the fold never scrolls the page
Reproduces #541: cmdk auto-selects the first item on mount and calls its native `scrollIntoView({ block: "nearest" })` — unpatched, that walks every scrollable ancestor including the window. A tall spacer pushes the list below the fold so a regression here scrolls `window.scrollY` away from 0.
External input combobox (aria-activedescendant)
API
Command
| Prop | Type | Description |
|---|---|---|
onActiveItemIdChange | (id: string | undefined) => void | Reports the DOM `id` cmdk assigned to the currently highlighted item, so an input rendered OUTSIDE this `Command` tree (a composer textarea, a combobox trigger) can set `aria-activedescendant` without querying `[role="option"]` positionally. Fires with `undefined` when nothing is highlighted. cmdk owns each item's `id`/`role`/`aria-selected` and applies them AFTER the consumer spread, so a consumer-supplied `id` on `CommandItem` is silently dropped (`CommandItem` warns about this in development) — this callback is the supported way to obtain it. See also the `useCommandActiveItemId` hook for reading the same value from a descendant already inside the `<Command>` tree. It fires for EVERY highlight change, including the item cmdk auto-highlights on mount and the one it re-highlights after each filter keystroke — the two states cmdk's own `state.selectedItemId` misses. |
CommandDialog
| Prop | Type | Description |
|---|---|---|
filter | ComponentPropsWithoutRef<typeof CommandPrimitive>["filter"] | Custom cmdk ranking (e.g. strict substring instead of fuzzy). |
title | ReactNode | The dialog's accessible name, rendered `sr-only`. OPTIONAL, and deliberately so: callers that already render their own `DialogTitle` in `children` must not be forced to move it, and `@elabs-ai/components-ai`'s `VoiceSelectorDialog` passes this whole prop type straight through. Supply it when you have no visible title — a `Dialog` with no accessible name is a Radix warning and an axe violation. |