Multi-dimensional styling variance decomposition system.

TypeScript
const buttonVariants = svd({
  variants: {
    size: {
      sm: "px-3 py-1.5 text-sm",
      md: "px-4 py-2 text-base",
      lg: "px-6 py-3 text-lg",
    },
    // More variants...
  },
  defaultVariants: {
    size: "md",
  },
});

const styles = buttonVariants({ size: "sm" });

What is SVDM?

SVDM is a multi-dimensional styling variance decomposition system in TypeScript that lets you define and manage style variations in a structured, scalable way. It is especially useful when you are building complex design systems, high-quality UI component libraries, or reusing configuration typings across many components.

TL;DR

Use SVDM when you are implementing a complex design system with variations that affect multiple components or tags.
Use SVDM when you are building a UI component library that cares about design details and consistency.
Use SVDM when you want type-safe configuration definitions without rewriting TypeScript types repeatedly.
You get type safety and IDE hints out of the box, without manually defining most typings.
You can use SVDM not only for class names but also for nested configuration objects, presets, inline styles, or CSS-in-JS.

How does SVDM work?

SVDM takes a schema that describes your axes of variation — such as variant, size, or tone — and generates a function that maps variant selections to concrete styles. It is inspired by Class Variance Authority (CVA) and extends that idea to handle more complex, multi-dimensional variance spaces, while staying compatible with familiar CVA-style usage.

To dive deeper, use the other pages in this section for installation steps, TypeScript typing details, practical use case snippets, and examples of how to use SVDM in React UI components.

San FranciscoSF