> ⚠️ styled-cva 0.4.x only supports React 19.x. If you're on React 18, use the latest 0.3.x ⚠️

styled-cva

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

Installation

npm

``bash npm i --save styled-cva`

pnpm

`bash pnpm add styled-cva`

bun

`bash bun add styled-cva`

`Usage`

basic

`tsx import tw from "styled-cva";

const StaticButton = tw.button
bg-primary rounded-xl cursor-pointer
;

// ... Click Me;`

variants

`tsx import tw from "styled-cva";

const VariantButton = tw.button.cva("btn-base-class", { variants: { // smart disappearing props: // variant keys starting with $ will not be sent to the DOM, // this avoids extraneous props warning $variant: { primary: "btn-primary-class", secondary: "btn-secondary-class", }, }, });

// ...

// $variant is infered to 'primary' | 'secondary' Click Me;

// actual element in the dom will be: //`

withProps

`tsx const StyledButton = tw.button .cva("btn-base", { variants: { $variant: { primary: "btn-primary", secondary: "btn-secondary", }, }, }) .withProps({ "data-testid": "my-button", type: "button", $variant: "primary", // Valid variant value });

// The component now has default props applied Click Me;

// User props override defaults Submit ;`

proxy

`tsx import Link from "next/link";

const Button = tw.button.cva("btn", { variants: { $variant: { primary: "btn-primary", secondary: "btn-secondary", }, }, });

// ...

// works with known jsx elements

;

// also with custom components

;`

`VSCode intellisense`

For tailwindcss extension support, add this to your vscode settings.json

`json // tailwindcss intelisense settings "tailwindCSS.emmetCompletions": true, "tailwindCSS.includeLanguages": { "typescript": "javascript", // if you are using typescript "typescriptreact": "javascript" // if you are using typescript with react }, "tailwindCSS.experimental.classRegex": [ "tw([^]*)", // tw..."tw\\.[^]+([^]*)", // tw.xxx..."tw\$.?\$.?([^]*)", // tw(Component)...["cva\$([^)])\$", "]" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">\"'.*?[\"']"]
],
"editor.quickSuggestions": {
"strings": true // forces VS Code to trigger completions when editing "string" content
},
```