# CVA — Class Variance Authority

## Docs

- [compose](https://mintlify.wiki/joe-bell/cva/api-reference/compose.md): Merge multiple CVA components into a single component function.
- [cva](https://mintlify.wiki/joe-bell/cva/api-reference/cva.md): Build a type-safe variant component that resolves to a class string.
- [cx](https://mintlify.wiki/joe-bell/cva/api-reference/cx.md): Concatenate class names using the clsx API.
- [defineConfig](https://mintlify.wiki/joe-bell/cva/api-reference/define-config.md): Create a custom cva, cx, and compose bound to a shared configuration.
- [Types](https://mintlify.wiki/joe-bell/cva/api-reference/types.md): TypeScript types exported from the cva package.
- [Astro](https://mintlify.wiki/joe-bell/cva/examples/astro.md): Use CVA in Astro components with the class:list directive and TypeScript-typed props.
- [Other Use Cases](https://mintlify.wiki/joe-bell/cva/examples/other.md): CVA patterns for BEM, 11ty/Eleventy, dynamic text content, and other non-Tailwind workflows.
- [React](https://mintlify.wiki/joe-bell/cva/examples/react.md): Use CVA to build type-safe, variant-driven components in React with Tailwind CSS or CSS Modules.
- [Svelte](https://mintlify.wiki/joe-bell/cva/examples/svelte.md): Use CVA in Svelte components with scoped styles and TypeScript-typed props.
- [Vue](https://mintlify.wiki/joe-bell/cva/examples/vue.md): Use CVA in Vue components with scoped styles and the :class binding.
- [FAQs](https://mintlify.wiki/joe-bell/cva/faqs.md): Answers to common questions about CVA.
- [Composing Components](https://mintlify.wiki/joe-bell/cva/getting-started/composing-components.md): Combine multiple CVA components into one using compose or manual cx composition.
- [Compound Variants](https://mintlify.wiki/joe-bell/cva/getting-started/compound-variants.md): Apply classes only when multiple variant conditions are met simultaneously.
- [Default Variants](https://mintlify.wiki/joe-bell/cva/getting-started/default-variants.md): Set fallback variant values that apply when a prop is not explicitly passed.
- [Installation](https://mintlify.wiki/joe-bell/cva/getting-started/installation.md): Install Class Variance Authority and configure it for your project, including optional Tailwind CSS integration.
- [Quickstart](https://mintlify.wiki/joe-bell/cva/getting-started/quickstart.md): Build your first type-safe variant component with CVA in four steps.
- [TypeScript](https://mintlify.wiki/joe-bell/cva/getting-started/typescript.md): Extract and use variant prop types with VariantProps for fully type-safe CVA components.
- [Variants](https://mintlify.wiki/joe-bell/cva/getting-started/variants.md): Define named groups of CSS classes activated by props to build consistent, type-safe UI components.
- [Defining Config](https://mintlify.wiki/joe-bell/cva/guides/defining-config.md): Use defineConfig to create a custom cva, cx, and compose instance with shared hooks and global class transformations.
- [Extending Components](https://mintlify.wiki/joe-bell/cva/guides/extending-components.md): Override variants on an existing CVA component, create specialized variants using VariantProps, and combine components with compose.
- [Tailwind CSS](https://mintlify.wiki/joe-bell/cva/guides/tailwind-css.md): Set up Tailwind CSS IntelliSense with CVA, handle style conflicts using tailwind-merge, and configure the Prettier plugin.
- [Introduction](https://mintlify.wiki/joe-bell/cva/introduction.md): Class Variance Authority (CVA) is a tiny, TypeScript-first library for building type-safe UI component variants with any CSS approach.
- [Migrating](https://mintlify.wiki/joe-bell/cva/migrating.md): Upgrade from the legacy class-variance-authority package to the cva package (v1+).

## OpenAPI Specs

- [openapi](https://mintlify.wiki/joe-bell/cva/api-reference/openapi.json)