Storybook Playground#
The Storybook playground lets you configure the appearance
object in real time and see how every UI element reacts instantly. It is the fastest way to iterate on themes, variables, styles, and settings before copying the final configuration into your code.
For the best experience, open the playground in full screen .
Element Groups#
Stories are organised by element:
| Group | What it covers |
|---|---|
| AdumoClient | Shared components — buttons, dialogs, dropdowns, inputs, and toggles |
| PaymentsElement | Card payment form, card number input, and transaction amount |
| PaymentMethodElement | Single payment method button |
| PaymentMethodsElement | Payment method selection list |
Each element group contains a folder per theme (e.g. Light Theme). Select a story within a group to focus on the selectors available for that component.
Controls#
Expand the Controls panel beneath the preview to see the four top-level appearance keys:
| Key | What you can adjust |
|---|---|
| theme | Switch between built-in themes |
| variables | Global design tokens — colours, fonts, spacing, border radius, etc. |
| styles | Per-selector CSS overrides (one row per selector key, with CSS property inputs) |
| settings | Behavioural options such as input label type and payment method ordering |
Each key can be expanded to reveal its individual controls. Changes are applied to the preview immediately.
Appearance Config#
Adjacent to the Controls panel is the Appearance Config tab. It outputs the current appearance as a JSON object with a copy-to-clipboard button so you can paste the config straight into your code.
Annotations#
Toggle the Annotations button in the toolbar to enable an interactive overlay on the preview:
- Selector labels appear beside each element, showing the exact selector key name used in the
stylesconfiguration. - Element boundaries are drawn around each component so you can see exactly which area a selector targets.
- Grouped selectors — where multiple selectors apply to the same element, they are collapsed under a tree. Click the caret to expand and view all selectors in the group.
- Hover highlighting — hovering over an element in the preview isolates its boundary and label; hovering a label highlights the corresponding element.
- Click to navigate — click an annotation label to scroll the Controls panel to that selector group. Conversely, clicking a control highlights the matching element boundary and label in the preview.