Open SDK · MIT License · React 18+

Radix UI + shadcn/ui +

Tailwind CSS

Ship React UI faster with
ready-made, themeable components

ComposeKit gives you 22 production-ready components — charts, forms, cards, and more — that you can drop into any React app and style to match your brand. Need a full widget built by AI? Connect to BrainPiper Studio and embed it in one line.

View Docs & Playground npm install

terminal

# install the SDK
npm install @brainpiper/composekit

# peer dependencies
npm install react react-dom

Why ComposeKit

Everything you need to ship UI fast

22 production-ready components

Built on Radix UI primitives and shadcn/ui, styled with Tailwind CSS. Input, Select, Button, Chart, Card, Carousel, Accordion, and more — accessible, composable, and theme-aware out of the box.

CDN mode — zero build step

Point ComposeKitRenderer at a widget ID and it fetches, loads, and renders the widget at runtime. Publish in Studio and changes go live instantly.

Build-time mode for full control

Import individual component plugins and assemble layouts in code. Tree-shakeable, typed, and Webpack / Vite compatible.

AI-powered Studio

Describe a widget in plain language and BrainPiper's AI builds it for you. Refine with drag-and-drop, publish, and embed — no frontend engineer required.

Live data binding

Pass a data object and receive granular onUpdate callbacks. Every field change is reported with a dot-path — no global form state needed.

Full theming with CSS variables

Override any design token — colours, radius, shadows — with a single theme object or by setting CSS custom properties globally.

Three render modes

Use however you want

Pick the mode that fits your workflow — or mix them in the same app.

Individual components

Import any component directly — no renderer, no schema. Use ComposeKit as a styled component library inside your own layouts.

import { ComposeKitChart } from '@brainpiper/composekit/chart';

<ComposeKitChart
  type="bar"
  data={salesData}
  dataKeys={['revenue']}
  xAxisKey="month"
/>

CDN mode

Widgets live on BrainPiper's CDN. Drop a widgetId in your code and ComposeKit handles everything else. Best for non-technical teams and rapid iteration.

import { ComposeKitRenderer } from '@brainpiper/composekit';

<ComposeKitRenderer
  widgetId="4c6e51bc-59c1-4d54-afff-20bb54311dab"
  data={{ userId: 'u_001' }}
  onUpdate={(path, val) => console.log(path, val)}
/>

Build-time mode

Provide a JSON layout schema and render it locally. All plugins are bundled with your app — no CDN dependency, works offline, fully typed.

import { ComposeKitRenderer } from '@brainpiper/composekit';

<ComposeKitRenderer
  schema={myWidgetSchema}
  data={{ revenue: 42000 }}
  disableCdn
/>

Component library

22 components out of the box

All components are fully typed, accessible, and theme-aware.

Inputs

Input Select Textarea Toggle RadioGroup

Actions

Button ButtonGroup

Display

Card Avatar Badge Image Carousel

Data & Charts

Chart ^new List

Feedback

Alert Accordion Overlay

Layout & Typography

Section Grid Separator Heading Paragraph

Browse all components with live demos →

Available on npm

Install in seconds

ComposeKit is published to the public npm registry under the @brainpiper scope. It supports React 18+ and ships with full TypeScript types.

Zero runtime dependencies — peer deps only (React, react-dom)
TypeScript declarations bundled in the package
Individual plugin entry points for tree-shaking
Webpack and Vite compatible
MIT licensed — free for commercial use

View on npm

shell

# npm
npm install @brainpiper/composekit

# yarn
yarn add @brainpiper/composekit

# pnpm
pnpm add @brainpiper/composekit

Ship React UI faster with ready-made, themeable components