A typesafe, class-variance-authority-based, styled-components-like library for authoring React components with Tailwind CSS.
⚠️ styled-cva 0.5.x only supports React ≥19.x. If you're on React 18, use the latest 0.3.x⚠️
npm
npm i --save @styled-cva/reactpnpm
pnpm add @styled-cva/reactbun
bun add @styled-cva/reactimport tw from "@styled-cva/react";
const Button = tw.button`bg-blue-500 text-white font-bold py-2 px-4 rounded`;
<Button>Click me</Button>;| Package | Description |
|---|---|
| packages/react | @styled-cva/react – core library (published) |
| packages/eslint-plugin | @styled-cva/eslint-plugin – ESLint rule to extract classes to styled components (published) |
| docs | @styled-cva/docs – Nextra documentation site (private) |
Requirements: Bun (or Node ≥20), recommended via packageManager in root package.json.
bun install
bun run build
bun run test
bun run lint
bun run dev| Script | Description |
|---|---|
bun run build |
Build all packages (core, react, solid, vue, eslint-plugin) and docs |
bun run dev |
Start docs site (Next.js) |
bun run test |
Run tests in packages that have a test script |
bun run lint |
Lint packages |
bun run format |
Format with Prettier |
bun run clean |
Remove build output for all packages |
bun run bump:patch |
Bump patch version(s) for package(s) (supports glob filter) |
bun run changeset |
Add a changeset (describe a release) |
bun run version |
Bump versions and update CHANGELOGs from changesets |
bun run release |
Build and publish all versioned packages |
bun run release:react |
Build and publish @styled-cva/react |
bun run release:solid |
Build and publish @styled-cva/solid |
bun run release:vue |
Build and publish @styled-cva/vue |
bun run release:eslint-plugin |
Build and publish @styled-cva/eslint-plugin |
Versioning uses Changesets. See RELEASING.md for the full workflow.
Apache-2.0. See packages/react/LICENSE.