Themes
Every CleverUI component is styled entirely with CSS variables, so one theme block restyles the whole library. Tune it here, watch the gallery follow, then copy the variables into your globals.css.
Theme
Preset
Your selection here also becomes the default theme for previews across the docs. Each preview's own toolbar can still override it per component.
Spotlight Card
Magnetic Button
Ledger Accordion
Frequently asked questions
How do I apply a theme from this page to my project?
Pick a preset (or set a custom primary and radius), then use "Copy theme", it copies a :root / .dark CSS variables block. Paste it into your globals.css and every CleverUI component you install follows it automatically.
Does the customizer change the components I have already installed?
No. The customizer only re-themes the live previews on this site. Installed components read your project's own CSS variables, so the copied theme block is what changes their look.
Can I preview a single component under a different theme?
Yes, every preview across the docs has its own theme controls in the toolbar: preset dots, a custom primary colour picker, and light/dark. Changes there affect that preview only.