Fourteen themes. One design system.
Each theme is built on semantic OKLCH variables — switch instantly, no restyle. Choose a theme and see the live preview update. Copy the snippet at the bottom to use it in your project.
Choose a theme
Click any theme — the preview updates instantly.
Dark
Light
Live preview
Components update with the selected theme.
Theme
Revenue $12,450
Users 1,847
Tasks 94%
Theme applied. All components use the same semantic variables.
Done Pending Failed Neutral
| Item | Status | Amount |
|---|---|---|
| Acme Co | Done | $316 |
| Globex | Pending | $242 |
Use this theme in your app
Set the theme on your HTML root. For system preference, persistence, and custom themes, see the theming docs.
html html
<html lang="en" data-theme="github-dark-classic">