Style Variance Authority (SVA)

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

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

``sh


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

`typescript
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 {}
// StyleVariantProps is an helper method to infer the props for a given SVA configuration
`

API

$3

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

`typescript
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.

$3

Infers the variant props for a given SVA configuration.

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

interface ButtonProps {
color: StyleVariantProps["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

[npm-version-src]: https://img.shields.io/npm/v/style-variance-authority/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/style-variance-authority
[npm-downloads-src]: https://img.shields.io/npm/dm/style-variance-authority.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/style-variance-authority
[license-src]: https://img.shields.io/npm/l/style-variance-authority.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/style-variance-authority