Theming and design tokens
Uxelith components don't ship a theme of their own. They read the same CSS variables shadcn/ui uses, so a component looks like the rest of your app the moment it lands.
The tokens components read
Every colour in a component is a Tailwind class built on these variables — bg-card, text-muted-foreground, ring-ring — never a hard-coded value. If your project was set up with shadcn init, you already define them.
| Variable | Used for |
|---|---|
--background / --foreground | Page surface and body text. |
--card / --card-foreground | Raised surfaces such as cards, panels and table rows. |
--popover / --popover-foreground | Menus, tooltips, the date picker and toasts. |
--primary / --primary-foreground | The accent: main buttons, selected states, focus glows, charts by default. |
--muted / --muted-foreground | Quiet fills and secondary text. |
--accent / --accent-foreground | Hover and active backgrounds. |
--border / --input / --ring | Hairlines, field borders and focus rings. |
--destructive | Errors and destructive actions. |
--chart-1 … --chart-5 | Series colours for the area and bar charts. |
--radius | Corner rounding (components use it through Tailwind's rounded-* scale). |
Changing the theme
Change the variables in your global stylesheet and every component follows. Set them in both :root and .dark, and keep text colours at a contrast of at least 4.5:1 against their background.
:root {
--background: oklch(0.99 0.004 95);
--foreground: oklch(0.2 0.01 260);
--primary: oklch(0.47 0.12 168);
--primary-foreground: oklch(0.99 0 0);
--radius: 0.75rem;
}
.dark {
--background: oklch(0.16 0.005 260);
--foreground: oklch(0.96 0.004 95);
--primary: oklch(0.83 0.14 168);
--primary-foreground: oklch(0.2 0.02 168);
}Rather not pick thirty values by hand? Themes shows the whole library in ten ready-made themes, light and dark, and gives you the complete block to paste. Every one is checked for readable contrast.
Dark mode
Components switch with your theme through the .dark class, the shadcn convention. Nothing in a component checks the theme itself, so any approach that toggles .dark on <html> works — including next-themes.
Per-component variables
Some components expose a variable for one specific colour or size, with your theme as the fallback. Set it on the component, or on any parent to change every instance inside. This is also what the Studio's colour controls write.
<PricingCard
className="[--pricing-accent:var(--color-violet-500)]"
…
/>
/* or once, for every instance in a section */
.launch-section {
--chart-1: oklch(0.7 0.17 300);
}| Component | Variable | Default |
|---|---|---|
| Gradient Button | --gradient-from / -via / -to | around --primary |
| Pricing Card | --pricing-accent | --primary |
| Animated Input | --input-accent | --ring |
| Progress Ring | --progress-color / -color-end / -track | theme |
| Blur Text | --blur-text-accent | --primary |
| Switch | --switch-on | --primary |
| Copy Button | --copy-success | --primary |
| Slider | --slider-fill | --primary |
| Rating | --rating-on | --chart-3 |
| Shimmer Text | --shimmer-base | --muted-foreground |
| Shimmer Text | --shimmer-light | --foreground |
| Typewriter | --typewriter-color | inherit |
| Timeline | --timeline-accent | --primary |
| File Dropzone | --dropzone-accent | --primary |
| Data Table | --table-accent | --primary |
| Stepper | --stepper-accent | --primary |
| Compare Slider | --compare-divider | white |
| Date Picker | --date-accent / --date-accent-foreground | --primary / --primary-foreground |
| Area Chart | --chart-1 … --chart-3 | --primary… |
| Sortable List | --sortable-accent | --ring |
Fonts and radius
Components inherit your font family; none sets its own. Rounding comes from Tailwind's rounded-* utilities, which shadcn maps to --radius, so a sharper or softer radius changes them all.