Skip to main content

Get started

Connect your coding agent once, pick what you are doing, and paste one prompt. Every command on this page is copyable and comes from the same source the CLI prints.

Step 1 — once per machine

Connect your agent

Your agent needs a way to look up real props instead of guessing them. Pick one; both give it the same lookups.

Any agent: the hosted MCP server

Nothing to install. Choose your host and paste the line into its terminal or its MCP settings.

claude mcp add --transport http brand-ui https://elabs-ai.com/mcp
Claude Code: the plugin

Type these two lines into Claude Code. It adds 9 skills that route new apps, migrations and everyday component work, plus three reviewer agents.

Add the marketplace
/plugin marketplace add mreimitz/elabs-components
Install the plugin
/plugin install brand-ui@brand-ui
Other agents: the skills on their own

Cursor, Codex and other hosts that read Agent Skills can add them from the repository.

Add the skills
npx skills add mreimitz/elabs-components

Step 2 — pick your route

What are you doing?

One command writes a runnable Vite + React app on a template, with tokens, Tailwind and the agent context files already wired. The prompt does the same and then builds your app on top.

The commands

Scaffold
npx -y @elabs-ai/components-cli create my-app --template dashboard
Install and run
cd my-app && npm install && npm run dev
See every template
Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Build a new app with brand-ui, the React component library published on npm as @elabs-ai/components-*.

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. Scaffold the app: `npx -y @elabs-ai/components-cli create my-app --template dashboard`. Install its dependencies, start the dev server and confirm the starter screen renders before you change anything.
3. Then build this on top of the scaffold: [describe the app: who uses it, its screens, its data]
4. Start each whole screen from the playbook the search tool returns for it (dashboard, data-app, ai-assistant, flow-workspace, settings, marketing) and compose registry blocks before writing layout by hand.
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.

Wiring it by hand

The one-time wiring

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled.

Your CSS entry
@import "@elabs-ai/components-tokens/styles.css";
@import "@elabs-ai/components-tokens/themes/light.css";
@import "@elabs-ai/components-tokens/themes/dark.css";

/* one line per @elabs-ai package you render */
@source "../node_modules/@elabs-ai/components-ui/dist";
Your app root
import { ThemeProvider } from "@elabs-ai/components-tokens";

export function Root() {
  return (
    <ThemeProvider defaultTheme="light">
      <App />
    </ThemeProvider>
  );
}

Where to next

Templates

Full screens to start from.

Templates

Components

Every component, with variants and when to use it.

Components

For agents

The install matrix, the live tool-call trace and the gates.

For agents

Storybook

The reference: every state, in every theme.

Storybook