Colors
Generated primitive, semantic and intent color tokens from the legacy Studio builder.
Typography
Font, type scale, radius and shadow tokens from the legacy Studio builder.
Type scale
Text xs · The quick brown fox
Text sm · The quick brown fox
Text base · The quick brown fox
Text lg · The quick brown fox
Card
A surface for grouped content, actions and supporting metadata.
Theme Preview
Inspect how surfaces react to token overrides.
Cards inherit semantic surface, border, radius and shadow tokens.
Input
Text input with background, border, ring and placeholder tokens.
States
Textarea
Multi-line input using shared input surface and focus tokens.
States
Badge
Compact status labels using semantic intent colors.
States
Code
Inline and block code snippets for documentation surfaces.
Install with npx bambiui add button
const theme = createBambiTheme(tokens);Separator
A visual divider that follows the semantic border token.
Switch
Boolean control for preference and setting surfaces.
Slider
Range input for numeric token and setting controls.
Checkbox
Selection control with checked, disabled and invalid states.
Accordion
Collapsible sections with keyboard navigation and state tokens.
Aspect Ratio
Media frame for predictable responsive preview regions.
Callout
Contextual feedback blocks for info, success, warning and danger messages.
Combobox
Searchable choice input for token or component selection.
Container
Layout wrapper that constrains content width and rhythm.
Contained Studio content with responsive max width.
Dialog
Modal surface with trigger, overlay content and close affordances.
Export theme
Dialog content uses popover, border, radius and shadow tokens.
Kbd
Keyboard shortcut glyphs for interaction hints.
Label
Accessible form labels that align with control states.
Popover
Anchored floating content for quick edits and metadata.
Adjust generator values from the inspector.
Radio Group
Mutually exclusive options for theme and export settings.
Select
Single-select menu for component, scale and preset choices.
Spinner
Progress indicator used by loading buttons and async states.
Tabs
Tabbed navigation for inspector sections and preview states.
Tooltip
Lightweight contextual help for compact controls.