Introduction

A typesafe, class-variance-authority-based, styled-components-like library for authoring React, Solid, Vue, and ReScript components.

Welcome to styled-cva documentation.

A typesafe, class-variance-authority-based, styled-components-like library for authoring UI components with Tailwind CSS.

styled-cva only supports React 19.x (or Solid, Vue, ReScript via their respective adapters). If you're on React 18, use the legacy 0.3.x releases.

Quick Example

import tw from "@styled-cva/react";

// Basic styled component
const Button = tw.button`bg-blue-500 text-white px-4 py-2 rounded`;

// With variants (prefer shorthand — `.cva()` on intrinsics is deprecated)
const VariantButton = tw.button("px-4 py-2 rounded", {
  variants: {
    $variant: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-gray-500 text-white",
    },
  },
});

// Usage
<Button>Click me</Button>
<VariantButton $variant="primary">Primary</VariantButton>