Everything you need to build with it
Browse a component, fine-tune its options and copy production-ready JSX. Here's how it works and what every option does.
Getting started
1. Pick a component
Choose any component from the list on the Components page to load it into the live preview.
2. Tune the options
Use the toolbar above the preview to adjust content, appearance and state — every change renders instantly.
3. Copy the JSX
Grab the generated, syntax-highlighted JSX for any variant and paste it straight into your project.
Option reference
Every control you'll find in the customize toolbar, grouped by what it affects.
Content
- value
- Text inside the component — a label, badge text or avatar initials.
- placeholder
- Placeholder text shown in the Input field.
- type
- HTML input type: text, email, password, number, and more.
- progress
- Completion value from 0–100% for the Slider and Progress bar.
Appearance
- tone
- Fill style: subtle, solid or outline.
- size
- Sizing scale: small, medium or large.
- shape
- Corner preset: pill, rounded or square.
- radius
- Precise corner radius in pixels — Auto follows the shape preset.
- weight
- Font weight of the label: regular to bold.
- iconPosition
- Place the icon before (leading) or after (trailing) the label.
- orientation
- Lay items out horizontally or vertically (Radio group, Tabs).
- position
- Placement for the Tooltip and Toast: top, right, bottom or left.
State
- fullWidth
- Stretch the component to fill its container.
- loading
- Show a spinner and disable interaction.
- required
- Mark the field as required with an asterisk.
- dismissible
- Add a close button to the alert.
- showDot
- Toggle the status dot indicator.
- showIcon
- Toggle the leading icon.
- showValue
- Show the numeric % label on the Slider / Progress bar.
- shadow
- Toggle the drop shadow on the Card.
- checked
- Default checked / on state.
- disabled
- Render the disabled state.
Semantic tones
Most components ship in 5 semantic variants that double as validation states.
neutralsuccesswarningerrorinfo
Controls by component
Each component exposes only the options that make sense for it.
| Component | Available controls |
|---|---|
| Button | valuetonesizeshaperadiusweightshowIconiconPositionfullWidthloadingdisabled |
| Icon Button | tonesizeshaperadiusloadingdisabled |
| Input | placeholdersizeradiustyperequireddisabled |
| Textarea | placeholdersizeradiusrequireddisabled |
| Select | placeholdersizeradiusrequireddisabled |
| Checkbox | valuesizecheckedrequireddisabled |
| Radio | sizeorientationcheckedrequireddisabled |
| Switch | valuesizecheckeddisabled |
| Slider | sizeprogressshowValuedisabled |
| Badge | valuetonesizeshaperadiusweightshowDot |
| Avatar | valuesizeshaperadiusshowDot |
| Tag | valuetonesizeshaperadiusshowDotdismissible |
| Card | valuesizeradiusshapeshadow |
| Tooltip | valuesizeposition |
| Alert | valuetonesizeradiusshowIconiconPositiondismissible |
| Toast | valuetonesizeradiuspositionshowIcondismissible |
| Progress | sizetoneradiusprogressshowValueloading |
| Spinner | size |
| Tabs | sizeshapefullWidthorientation |
| Breadcrumb | sizeshowIcon |
Light & dark, ready to explore
Ready to try it?
Open the playground, tweak a component and copy the code in seconds.