Style Variance Authority
npm install style-variance-authority[![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.
``shnpm
npm 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"
}
``This package is inspired by the Class Variance Authority (CVA) package by Joe Bell. Special thanks to Joe for his incredible work.
[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