Start from the optional theme and change its variables, or style every part yourself.
The components have no styles of their own. Style every part yourself, or start from the optional theme and change its variables. Pick a colour, corners and a mode below; the card changes as you go, and the CSS to paste is underneath.
Sign in
Welcome back to your workspace.
:root {
--sui-accent: #2c39f2;
--sui-accent-press: #1f29c4;
--sui-accent-wash: #eef0fe;
--sui-on-accent: #ffffff;
--sui-radius-control: 999px;
--sui-radius-box: 12px;
--sui-radius-item: 8px;
}
.dark {
--sui-accent: #8f97ff;
--sui-accent-press: #a9afff;
--sui-accent-wash: #191d3a;
--sui-on-accent: #0b0d11;
}How the theme works
The theme styles the data attributes each part renders, such as [data-scope="switch"][data-part="thumb"][data-state="checked"]. Every selector sits inside :where(), so it has zero specificity. Any class you add to a part overrides it without !important.
The theme also stops its transitions when the system asks for reduced motion.
Variables
Redefine the variables on :root to change the whole app, or on any element to change one part of a page.
| Variable | What it controls |
|---|---|
--sui-bg | The ground of a themed container |
--sui-surface | Raised surfaces such as dialogs, menus and listboxes |
--sui-muted | Quiet backgrounds such as the tab list |
--sui-border | Hairlines and surface borders |
--sui-control | Outlines of controls, such as the switch track and radio circle, at 3:1 contrast or more |
--sui-ink, --sui-ink-2, --sui-ink-3 | Text, from strongest to quietest |
--sui-accent, --sui-accent-press, --sui-accent-wash, --sui-on-accent | The accent, its pressed state, its tinted background and the text on it |
--sui-danger, --sui-danger-wash | Destructive actions |
--sui-tooltip, --sui-on-tooltip | Tooltip background and text |
--sui-radius-control, --sui-radius-box, --sui-radius-item | Corners of controls, surfaces and list items |
--sui-ease, --sui-duration | Motion |
Dark mode
Dark values apply under a .dark class on any ancestor, which is what next-themes sets, or under data-sui-mode="dark". Use data-sui-mode="light" to keep one area light inside a dark page. That is how the previews on this site switch modes on their own.
Turning the theme off in one place
Add data-sui-unstyled to any element and every part inside it renders with no theme styles, as if the file were not imported. The "Without the theme" examples on each component page use it.
<div data-sui-unstyled>
<Switch className="…">…</Switch>
</div>Buttons and tones
The theme draws dialog, menu and tooltip triggers and DialogClose as outline buttons. Add data-tone="primary" for a filled accent button, or data-tone="danger" on dialog buttons and menu items for destructive actions.
Styling without the theme
Leave the theme out and style the data attributes directly. With Tailwind CSS:
<Switch className="h-6 w-11 rounded-full bg-zinc-400 p-0.5 data-[state=checked]:bg-indigo-600">
<SwitchThumb className="block size-5 rounded-full bg-white transition-transform data-[state=checked]:translate-x-5" />
</Switch>Each component page lists the data attributes of every part.