styled-cva

A typesafe, class-variance-authority-based , styled-components-like library for authoring React components

⚠️

styled-cva 0.5.x only supports React 19.x. If you’re on React 18, use the latest 0.3.x

Quick Example

Here’s a simple example to get you started:


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
const VariantButton = tw.button.cva("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>

📚

For detailed installation instructions and comprehensive examples, check out the Getting Started guide.

Features

Type-safe CVA-based Styled-components-like API Tailwind CSS Polymorphic components Getting Started

Next Steps

Ready to get started? Check out the Getting Started guide to learn the basics, or dive into the API Reference for complete documentation.