Customisation
Props, presets, the playground and generated code.
Props are the API
Everything you can change in the inspector is a typed prop on the component, listed in the Props table on its page. Controls marked as content (sample text, demo data) only affect the preview and become children or example data in the generated code.
Control types
| Control | Prop value |
|---|---|
| Boolean | true | false |
| Text | string |
| Number / slider | number, clamped to the documented range |
| Duration | number in milliseconds |
| Colour | hex string; any CSS colour works when passed in code |
| Select / enum | string union |
| Spring | { stiffness, damping, mass } |
Remix presets
Many components ship presets — named sets of values such as Subtle, Elastic or Minimal. Applying one resets to defaults first and then applies the preset, so results are reproducible.
Exporting your configuration
- Copy usage — a JSX example containing only the props that differ from the defaults.
- Copy config — the complete prop set as JSON, useful for design reviews or storing variants.
- Share link — the configuration is encoded in the
?config=URL parameter. - Copy AI prompt — a structured brief (purpose, selected values, dependencies, usage, accessibility requirements and integration steps) for Claude Code, Codex or other assistants. It is generated locally from metadata; nothing is sent anywhere.
The Playground
The Playground adds a component library, zoom, viewport presets and a code output panel. Your selection and settings persist in this browser's local storage and in the URL.