guides
Styling
Stepper uses shadcn/ui theme tokens, data attributes, and local source ownership for styling.
Theme tokens
The copied component avoids one-off color values and leans on semantic Tailwind tokens.
backgroundforegroundbordermutedmuted-foregroundprimaryprimary-foregrounddestructivedestructive-foregroundring
Theme token overrides
Stepper reads the same semantic tokens as the rest of your shadcn/ui project.
globals.css
Copy code is available in the top right.
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--border: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
}State selectors
state-selectors.css
Copy code is available in the top right.
[data-slot="stepper-item"][data-state="active"]
[data-slot="stepper-item"][data-state="completed"]
[data-slot="stepper-item"][data-state="disabled"]
[data-slot="stepper-item"][data-state="error"]
[data-slot="stepper-item"][data-position="previous"]
[data-slot="stepper-item"][data-position="current"]
[data-slot="stepper-item"][data-position="next"]
[data-slot="stepper-content"][data-state="active"]
[data-slot="stepper-content"][data-state="inactive"]Customize by composition
Because Stepper is copied into your app, you can pass className, target data attributes, or edit components/ui/stepper.tsx directly.