bambiui Studio

Design system explorer. Browse components, edit tokens, and compare variants across frameworks.

6 Components
4 Frameworks
OKLCH Color model
100% Static
Component categories
Space + drag to pan Ctrl + scroll to zoom Ctrl+0 to reset view

Colors

Primary Scale
primary-50
primary-100
primary-200
primary-300
primary-400
primary-500
primary-600
primary-700
primary-800
primary-900
primary-950
Neutral Scale
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-950
Danger Scale
danger-50
danger-100
danger-200
danger-300
danger-400
danger-500
danger-600
danger-700
danger-800
danger-900
danger-950
Success Scale
success-50
success-100
success-200
success-300
success-400
success-500
success-600
success-700
success-800
success-900
success-950
Warning Scale
warning-50
warning-100
warning-200
warning-300
warning-400
warning-500
warning-600
warning-700
warning-800
warning-900
warning-950
Base
background
foreground
card
card-foreground
border
separator
Brand
primary
primary-foreground
secondary
secondary-foreground
accent
accent-foreground
muted
muted-foreground
Semantic
danger
danger-foreground
success
success-foreground
warning
warning-foreground
ring
Input
input
input-background
input-foreground
input-placeholder

Typography

Font Families
--bambi-font-sans The quick brown fox jumps over the lazy dog
--bambi-font-mono const theme = "bambiui";
Font Sizes
text-xs
0.75rem The quick brown fox jumps over the lazy dog
text-sm
0.875rem The quick brown fox jumps over the lazy dog
text-base
1rem The quick brown fox jumps over the lazy dog
text-lg
1.125rem The quick brown fox jumps over the lazy dog
Font Weights
normal
400 Normal — The quick brown fox
medium
500 Medium — The quick brown fox
semibold
600 Semibold — The quick brown fox
bold
700 Bold — The quick brown fox

Buttons

Variants
Sizes
Icon
With Icon
Rounded
Full Width
Loading
Disabled
Button Group
Vertical Group
Usage 
<!-- Button -->
<Button intent="primary" size="md">Save</Button>
<Button intent="danger" loading>Deleting…</Button>
<Button size="icon" appearance="ghost" aria-label="Add">
  <PlusIcon />
</Button>

<!-- ButtonGroup (attached) -->
<ButtonGroup aria-label="Text alignment">
  <Button appearance="outline">Left</Button>
  <Button appearance="outline">Center</Button>
  <Button appearance="outline">Right</Button>
</ButtonGroup>

<!-- ButtonGroup (detached) -->
<ButtonGroup :attached="false" aria-label="Dialog actions">
  <Button appearance="ghost">Cancel</Button>
  <Button>Save</Button>
</ButtonGroup>

Card

A flexible surface for grouped content, actions, and dashboard summaries.

Live preview

Release health

Track component readiness across frameworks.

94%coverage
4frameworks
Variants
default Token-aware surface
outline Token-aware surface
ghost Token-aware surface
elevated Token-aware surface
Padding

sm

Compact, default, or relaxed density.

md

Compact, default, or relaxed density.

lg

Compact, default, or relaxed density.
Interactive link

Card docs

A real anchor with visible focus and hover states.
Dashboard grid
12Components
3Previews
100%Static 
<Card
  title="Workspace"
  description="Project activity and actions."
  variant="outline"
  size="md"
>
  ...
</Card>

Sidebar

Persistent navigation with groups, active state, disabled items, and collapse controls.

Live preview

Main content

The sidebar stays semantic and does not trap focus.

<Sidebar
  collapsible="icon"
  groups={[{ label: "Workspace", items: [{ label: "Overview", href: "/" }] }]}
>
  <span slot="header">Studio</span>
</Sidebar>

Drawer

Modal panels for settings, forms, and focused workflows.

Live preview
States
Focus trapTab stays inside while open.
EscapeEscape closes and returns focus.
LabelledTitle and description are wired to the dialog. 
<button data-drawer-open="settings-drawer">Open drawer</button>
<Drawer id="settings-drawer" title="Settings" side="right" size="md">
  ...
  <button slot="footer" data-drawer-close="settings-drawer">Save</button>
</Drawer>

Input

Accessible form input with normal and floating label modes, variants, tones, and adornments.

Variants
Sizes
Tones
Normal label

We will never share your email.

Floating label

Label floats on focus or value.

States
Feedback tones

Username is available.

This email may already be in use.

Start / End adornments
https://
.com
$
USD
Floating label + adornments
https://
.com
Full width

Stretches to container width.

Props-driven with error

Enter the same password again.