@elabs-ai/components-flow

Branded React Flow canvas, nodes, edges, controls, inspector.

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-flow
pnpm add elkjs@"^0.12.0"  # 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-flow/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

• @xyflow/react is a peer — it carries the React context useReactFlow reads, so two copies break.
• Import "@xyflow/react/dist/style.css" once.
• FlowWeightedEdge scales stroke width/colour from data.weight/data.value — reuse its exported computeEdgeWeightScale (pure, no React) if you build a matching legend.

What's in it

49 exported components — including Background, CanvasShell, ConnectionMode, Controls, DEFAULT_EDGE_TOKEN_RADIUS.

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