Skip to content
Menu

Start

Make it yours.

Assets keep their art direction by default and give you the handles to make them yours. Change colours and sizes without touching the component logic.

Custom properties

CSS-styled assets expose their design decisions as custom properties on their root class, prefixed per asset: --otp-*, --cmdk-*, --toast-* and so on. Override them on the class, on any ancestor, or inline.

globals.css
/* Match the OTP field to your brand */
.sd-otp {
  --otp-accent: #0f766e;
  --otp-radius: 6px;
  --otp-size: 48px;
}

Dark mode

Every CSS asset ships a dark palette that turns on when any ancestor has the dark class. This is the same convention as Tailwind’s class strategy, so a single <html class="dark"> switches everything. Tailwind assets use dark: variants.

If your app uses a data-theme attribute instead, alias it once:

globals.css
/* Tailwind v4: use data-theme for the dark variant */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

Motion

Timings and easings sit next to the properties they animate, so they are easy to find. Every asset honours prefers-reduced-motion, so please keep that block if you restyle.