import { InstallTabs } 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 InstallTabs 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 InstallTabs up before writing code: `npx -y @elabs-ai/components-cli docs InstallTabs` 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
Archetype Selected
Picking the "dashboard" archetype swaps the shown command.
Copy Own Tab
The `Copy-own` tab lists blocks and shows the `shadcn add` command for the selection.
Host Tab
A host tab shows its own commands, top to bottom.
Prompt Tab
The prompt tab's text is read-only and contains the MCP URL and `/llms.txt`.
API
InstallTabs
| Prop | Type | Description |
|---|---|---|
packageOptionsrequired | InstallTabsSelectOption[] | The `pnpm add` tab's per-archetype options; the first is the default selection. |
blockOptionsrequired | InstallTabsSelectOption[] | The `Copy-own` tab's per-block options; the first is the default selection. |
hostTabsrequired | InstallTabsHostTab[] | One tab per host, in order, between `Copy-own` and `Prompt`. |
promptrequired | string | The multi-line agent prompt shown (read-only) on the `Prompt` tab. |
value | string | Selected tab id (controlled): `"packages"`, `"copy-own"`, a host id, or `"prompt"`. |
defaultValue | string | Initially selected tab id (uncontrolled). Default: `"packages"`. |
onValueChange | (id: string) => void | |
packageValue | string | Selected `pnpm add` archetype id (controlled). |
onPackageValueChange | (id: string) => void | |
blockValue | string | Selected `Copy-own` block id (controlled). |
onBlockValueChange | (id: string) => void | |
onCommandCopy | (command: string, copied: boolean) => void | |
onPromptCopy | (copied: boolean) => void | |
labels | Partial<InstallTabsLabels> |