Install the theme
@sortui/theme writes every variable into the :root, .dark and @theme inline blocks of your global CSS. It replaces the values already there, so the CLI asks before it writes.
pnpm dlx shadcn@latest add @sortui/themeComponents also work without it: each one brings the SortUI variables it uses, and the shadcn colours and radii stay those of your own theme.
Convention
Every shadcn/ui variable keeps its name and meaning, including the background / foreground pairs. SortUI adds its own variables next to them, and Tailwind maps each one to a utility: --fill-2 is bg-fill-2.
<div className="bg-card text-card-foreground" />
<div className="bg-fill-2 text-muted-foreground" />Variables
The theme sets the whole shadcn/ui set, from background to sidebar-ring, and adds:
fill-1tofill-4: translucent fills for hovers, selection and tracks. A state is one step up, so there are no-hoveror-activevariables.fieldandfield-border: the background and line of text fields.control,control-hover,control-border: the surface and line of outline buttons, badges and chips.raised: the active tab over its tray.primary-borderandprimary-border-disabled: the inside edge of a primary button.chart-6tochart-10: a neutral and four more series after shadcn's five.syntax-*: the colours of highlighted code in the Diff component.radius-xstoradius-4xl: fixed sizes instead of multiples of--radius, under Tailwind's names.text-2xs,text-xsat 13 / 20,font-540andfont-heading: the text ladder below sm, a weight between medium and semibold, and a heading family that falls back tofont-sans.
Customizing
Once the theme is installed the values are yours. Edit them in :root and .dark:
:root {
--primary: oklch(0.596 0.145 163.225);
--field: var(--fill-1);
}
.dark {
--primary: oklch(0.508 0.118 165.612);
}Installing more components adds only the variables you are missing, so your values stay. To add a token of your own, follow the shadcn/ui theming guide.
