Theme playground
A complete dashboard (navbar, sidebar, stats, tables, menus, a form, dialogs and toasts) built with yarcl components.
Switch between the bundled themes, toggle light and dark, or open Edit theme to change any value and apply your own.
How it works
Section titled “How it works”The playground calls applyTheme from @yarcl/react/css whenever you pick a theme or apply your edits. It regenerates the stylesheet in the browser with the same generator the build plugin runs at build time, and switches the defaults components read, so each theme’s per-component choices (like pill buttons) show up too. See switching themes.
The theme editor has two tabs: Visual Editor has forms for all tokens, typography, interaction settings, defaults and component overrides. Optional settings can be added or removed, and token groups accept new entries. Code Editor edits the same config file, with support for comments, single quotes and trailing commas. Switching tabs preserves your changes, and Apply validates the config before updating the dashboard.
Copy config copies the edited config file for src/yarcl.config.ts. Download config saves the same file as yarcl.config.ts. Both include pending edits, even before you apply them.
The Back to docs link beside those controls returns to the documentation home page. Its home icon and text label stay visible on desktop and mobile.
The editor also includes built-in text from the labels catalog. Exported configs spread the default message formatters so they remain complete. Customize formatter functions in your project config; the playground parses data without executing code.