Skip to content
bambiuiOpen Studio

Design your system on the components you ship.

bambiui is a design-system studio for React and Base UI. Turn one brand color into Light and Dark themes, tune tokens on the real components, then copy the source into your app with npx.

Open Studio
npx [email protected] init
175%Button · lg
border-radius
—
padding-inline
—
block-size
—
font-size
—
Measured from the rendered Button, size lg, default System.

01Color

One brand color, two complete themes.

Semantic roles with readable foregrounds and an eleven-step scale for every role, generated for Light and Dark.

Light palette generated from #e8673c: seven roles, eleven steps each
Role501002003004005006007008009001000
neutral#fff9f6#f6ece8#e6dcd7#d2c8c4#b8afab#9f9692#877e7a#706763#59504d#433b38#120c09
primary#fff8f6#ffe9e2#ffd3c4#ffb69f#ff8d68#ed6c41#d15225#b43900#902b00#6d1f00#1f0400
secondary#fffbe5#fff0a6#f0df8f#dccc7c#c2b263#a9994a#908030#796910#605200#483d00#110d00
success#f0fff0#caffca#99f99d#86e58a#6cca71#52b059#379740#167e27#006517#004b0f#001201
warning#fff9f0#ffeccc#ffd895#f1c270#d7a956#bd903c#a3781e#896100#6c4c00#513800#150b00
danger#fff8f8#ffe9e6#ffd1cd#ffb5ae#ff8a82#e86d66#cc544f#b03a38#951e22#78000e#220001
info#f7faff#e4f0ff#c9e0ff#a7ceff#79b4ff#509af5#3780da#1b68bf#0050a0#003b79#000d23

Light roles

  • Primary#e8673c5.1 AA
  • Secondary#81711d4.9 AA
  • Success#1c822b4.9 AA
  • Warning#9469004.9 AA
  • Danger#bb44415.2 AA
  • Info#2671c94.9 AA

Dark roles

  • Primary#f472477.3 AA
  • Secondary#af9f507.9 AA
  • Success#58b75e8.3 AA
  • Warning#cd92007.7 AA
  • Danger#ef736c7.3 AA
  • Info#56a0fc7.8 AA
SuccessDanger

02Tokens

Change a token. Every component follows.

These are the shipped components, not mockups. Shape, spacing and type are shared by both themes; colors are set per theme.

radius8px
density16px
font size14px
font
theme
button / variant
button / size
badge / tone
PrimarySuccessWarningDanger
input / state
This name is already taken.
card
Weekly summary

Every value here comes from your tokens.

checkbox / switch

--ds-radius-sm 4px--ds-radius-md 8px--ds-radius-lg 12px--ds-padding-x 16px--ds-font-size 14px

03Export

Export what changed.

Your system is plain CSS custom properties and a JSON file the CLI reads. No runtime, no lock-in.

light.css · against the default System0 changed
No changes yet. Pick a brand color or move a slider above.

04CLI

Copy the source into your app.

Editable React, TypeScript and CSS Modules from a pinned, checksummed registry.

  1. 1

    Write your themes and the theme scope.

    npx [email protected] init --system ./bambiui-tokens.json
    Wrote 9 file(s).
  bambiui.json
  src/components/bambiui/ThemeScope.tsx
  src/components/bambiui/styles.css
  src/components/bambiui/theme.css
  …
Next: npx [email protected] add button
Host setup (src/app/layout.tsx):
  import "../components/bambiui/styles.css";
  import { ThemeScope } from "../components/bambiui/ThemeScope";
  2. 2

    Copy the components you use.

    npx [email protected] add button card input
      src/components/bambiui/ui/index.ts
  src/components/bambiui/ui/button…
  src/components/bambiui/ui/card…
  src/components/bambiui/ui/input…
Installed public components: button, card, input. Import from src/components/bambiui/ui.

Abridged example output for a Next.js app with a src directory. Nothing is installed and no scripts run on their own.

05Roadmap

What is shipped, what is next.

Explore the curated roadmap. Suggestions stay in New in this browser only and are not sent to the team.

New

00

Browser-only suggestions, not sent to the team

  • Nothing here yet.

Planned

02

Accepted and scheduled

  • Figma kit pilot

    A Card pilot mapped to the same token snapshot, then all seven components.

    feature
  • New components

    One at a time, chosen by real gaps — Textarea, Select and Radio are candidates.

    feature

In progress

02

Being built now

  • Data safety

    Two-tab editing, storage quota and retry, and safer imports of damaged files.

    feature
  • Assisted accessibility review

    VoiceOver, native 200% zoom and touch passes on the editing tools.

    feature

Completed

04

Shipped in Studio

  • Direct editing on the canvas

    Padding, margin, corners, size, resize, gap and text tools on real components, with visible scope and one-step undo.

    feature
  • Typography foundation

    Font family, base size and the H1–H6, paragraph, label and caption scale on their own page.

    feature
  • Component radius presets

    radius="sm | md | lg" per component and size, without flattening presets after manual edits.

    feature
  • CLI and static registry

    npx bambiui init / add / theme with pinned, immutable registry releases.

    feature