style-variance-authority
TypeScript icon, indicating that this package has built-in type declarations

0.0.10 • Public • Published

Style Variance Authority (SVA)

npm version npm downloads License

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

Dependencies (1)

Dev Dependencies (11)

Package Sidebar

Install

npm i style-variance-authority

Weekly Downloads

26

Version

0.0.10

License

MIT

Unpacked Size

14.2 kB

Total Files

8

Last publish

Collaborators

  • dananz