Skip to content

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.

Open the playground full screen

The playground calls applyTheme from yarcl/css whenever you pick a theme or apply your edits. It regenerates the stylesheet in the browser with the same generator the Vite 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.

Copy config copies the current theme as a config file you can paste into src/yarcl.config.ts.