style-variance-authority

Style Variance Authority (SVA)

A powerful and flexible package for managing style-based variants in your components. Inspired by the Class Variance Authority (CVA) package, SVA takes a similar approach but applies styles directly instead of using class-based variants.

Installation

# npm
npm install style-variance-authority

# yarn
yarn add style-variance-authority

# pnpm
pnpm install style-variance-authority

# bun
bun install style-variance-authority

Usage

import { sva, type StyleVariantProps } from "style-variance-authority";

const useButtonStyles = sva({
  base: {
    padding: "10px",
    border: "none",
    borderRadius: "5px",
  },

  variants: {
    color: {
      primary: { backgroundColor: "blue", color: "white" },
      secondary: { backgroundColor: "gray", color: "black" },
    },
    size: {
      small: { fontSize: "12px" },
      large: { fontSize: "18px" },
    },
  },

  defaultVariants: {
    color: "primary",
    size: "small",
  },

  compoundVariants: [
    {
      color: "primary",
      size: "large",
      styles: { fontWeight: "bold" },
    },
    {
      color: "*", // Will match any color variant
      size: "small",
      styles: { fontWeight: "light" },
    },
  ],
});

const buttonStyles = useButtonStyles({ color: "secondary", size: "large" });
// Result: { padding: '10px', border: 'none', borderRadius: '5px', backgroundColor: 'gray', color: 'black', fontSize: '18px' }

interface ButtonProps extends StyleVariantProps<typeof buttonConfig> {}
// StyleVariantProps is an helper method to infer the props for a given SVA configuration

API

sva

The main function to generate resolved styles based on variant props.

import { sva } from "style-variance-authority";

const useStyles = sva({
  variants: {
    color: {
      primary: { backgroundColor: "blue", color: "white" },
      secondary: { backgroundColor: "gray", color: "black" },
    },
  },
});

Properties

• base: Base CSS properties that apply to all variants.

• variants: Variants schema that defines the available variants and their styles.

• defaultVariants: Default values for each variant.

• compoundVariants: Compound variants that define additional styles based on combinations of variant values.

StyleVariantProps

Infers the variant props for a given SVA configuration.

import { type StyleVariantProps } from "style-variance-authority";

interface ButtonProps {
  color: StyleVariantProps<typeof useStyles>["color"]; // "primary" | "secondary"
}

Credits

This package is inspired by the Class Variance Authority (CVA) package by Joe Bell. Special thanks to Joe for his incredible work.

License

MIT