Build, preview & copy your design system
Explore a small library of UI components, fine-tune their options in real time and grab production-ready JSX — all in one place.
Fine-tune every option
Tweak tone, size, shape and state from a live control panel and watch each component update instantly.
Light & dark ready
Every component is designed for both themes out of the box, so what you preview is what you ship.
Copy-ready JSX
Each variant serializes to clean, indented JSX with syntax highlighting — copy and drop it straight in.
Icon references
See exactly which lucide icons a component uses and copy the markup for any of them in one click.
20 components, ready to explore
Jump straight into any component to preview its variants and copy the code.
Primary action trigger. Tweak the tone, size and shape, add a leading icon or preview its disabled state.
Compact square action holding a single icon. Adjust the tone, size and shape or preview its loading and disabled states.
Single-line text field. The semantic variant doubles as a validation state (success, warning, error).
Multi-line text field for longer input. The semantic variant doubles as a validation state.
Dropdown for choosing one option from a list. The semantic variant doubles as a validation state.
Binary selection control with a labelled hit area. Toggle its checked and disabled states across sizes.
Single-choice group of options. Lay it out horizontally or vertically and preview its checked state.
On/off toggle for instant settings. Preview the checked, disabled and sizing options in every tone.
Range control for picking a value along a track. Drag the progress and show its numeric value.
Compact label for statuses, categories or counts. Comes in five semantic tones with an optional status dot.
User placeholder rendered from initials. Adjust the size and shape and flag presence with a status dot.
Removable label for keywords or filters. Comes in five tones with an optional dot and dismiss button.
Surface container for grouping related content. Tune its corners, padding and drop shadow.
Small floating hint anchored to an element. Choose which side it points from and its size.
Inline banner for contextual feedback. Choose a tone, fill style and size, with an optional status icon.
Transient notification card. Pick a tone and size, show a status icon and add a dismiss button.
Horizontal bar tracking completion. Set the progress, show its value or switch to an indeterminate state.
Animated loading indicator. Preview it across sizes in every semantic tone.
Switch between views with a row of tabs. Adjust the size and shape or lay them out full width.
Trail of links showing the current location. Pick the size and swap the separator style.