@elabs-ai/components-ui

Foundation + app UI (Button, Card, Dialog, Tabs, AppShell, …).

Part of brand-ui, a source-owned, token-driven React component system. Published to the public npm registry under the @elabs-ai scope — it installs like any other npm dependency, with no registry configuration and no token required. See docs/CONSUMING.md.

Install

pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui
pnpm add @hookform/resolvers@"^3.9.1"  # optional peer
pnpm add motion@"^12.26.2"  # optional peer
pnpm add react-hook-form@"^7.54.2"  # optional peer

Set up styling (do not skip)

Components are Tailwind v4 classes backed by semantic tokens. Two lines in your CSS entry, or everything renders unstyled — the single most common mistake:

@import "@elabs-ai/components-tokens/styles.css";
@source "../node_modules/@elabs-ai/components-ui/dist";

The @source line is required because Tailwind ignores node_modules. Add one per brand-ui package you render. Then wrap your app once:

import { ThemeProvider } from "@elabs-ai/components-tokens";

<ThemeProvider defaultTheme="light">{children}</ThemeProvider>;

This package specifically

• The class-merge helper is at .../lib/cn — a pure, server-safe entry point.
• react-hook-form / @hookform/resolvers are optional peers — install them only if you use Form (import it from .../form, not the main barrel). FieldRow is the headless, react-hook-form-free field primitive and needs neither.

What's in it

430 exported components — including Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedGroup.

Don't guess the API — ask the CLI:

pnpm add -D @elabs-ai/components-cli
pnpm exec brand-ui search <query>   # find a component
pnpm exec brand-ui docs <Name>      # its real props, from source

Using an AI coding agent?

For Claude Code, install the plugin from this repo's checkout:

/plugin marketplace add .
/plugin install brand-ui

brand-ui docs <Name> returns intent, composition, state→token mappings and anti-patterns — tell your agent to run it instead of guessing a prop. The CLI also runs as an MCP server (brand-ui mcp).

Full guide

Tailwind and Next.js wiring, per-package extras, agent enablement and a prompt for migrating an existing project: docs/CONSUMING.md.

License

MIT