### Example with tailwind-merge

Source: https://cva.style/docs/getting-started/installation

Integrate cva with tailwind-merge to resolve style conflicts and create bulletproof components. This example shows how to define button variants and merge them.

```javascript
import { cva, type VariantProps } from "class-variance-authority";
import { twMerge } from "tailwind-merge";
 
const buttonVariants = cva(["your", "base", "classes"], {
  variants: {
    intent: {
      primary: ["your", "primary", "classes"],
    },
  },
  defaultVariants: {
    intent: "primary",
  },
});

export interface ButtonVariants extends VariantProps<typeof buttonVariants> {}

export const button = (variants: ButtonVariants) =>
  twMerge(buttonVariants(variants));
```

--------------------------------

### Responsive Variants with Tailwind CSS

Source: https://cva.style/docs/faqs

Example demonstrating how to create responsive variants using Tailwind CSS by conditionally rendering elements based on screen size. This approach leverages Tailwind's utility classes for breakpoints.

```jsx
export const Example = () => (
  <>
    <div className="hidden sm:inline-flex">
      <button className={button({ intent: "primary" })}>Hidden until sm</button>
    </div>
    <div className="inline-flex sm:hidden">
      <button className={button({ intent: "secondary" })}>
        Hidden after sm
      </button>
    </div>
  </>
);
```

--------------------------------

### Install cva with pnpm

Source: https://cva.style/docs/getting-started/installation

Use this command to install the class-variance-authority package using pnpm.

```bash
pnpm i class-variance-authority
```

--------------------------------

### Import aliased cva package

Source: https://cva.style/docs/getting-started/installation

Import the aliased 'cva' package after installation.

```javascript
import { cva } from "cva";

// …
```

--------------------------------

### Alias cva package with npm

Source: https://cva.style/docs/getting-started/installation

Install and alias the class-variance-authority package to 'cva' using npm for shorter import names.

```bash
npm i cva@npm:class-variance-authority
```

--------------------------------

### Vue Button Component with CVA Variants

Source: https://cva.style/docs/examples/vue

This snippet shows a Vue 3 component using `<script setup>` that defines a button component with CVA. It includes variants for intent, size, and disabled states, along with compound variants for combined styling.

```vue
<script setup 
lang="ts">
import {
  cva,
  type VariantProps,
} from
"class-variance-authority";

const button = cva
("button", {
  variants: {
    intent: {
      primary: "primary",
      secondary: "secondary",
    },
    size: {
      small: "small",
      medium: "medium",
    },
    disabled: {
      true: "disabled",
      false: "enabled",
    },
  },
  compoundVariants: [
    {
      intent: "primary",
      size: "medium",
      class: "uppercase border-2",
    },
  ],
});

export type ButtonProps = VariantProps<typeof button>;
</script>

<template>
  <button :class="button({ intent: 'primary', size: 'medium', disabled: false })">
    Click Me
  </button>
</template>

<style>
.button {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.primary {
  background-color: blue;
  color: white;
}

.secondary {
  background-color: gray;
  color: black;
}

.small {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

.medium {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.enabled {
  cursor: pointer;
}

.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.uppercase {
  text-transform: uppercase;
}

.border-2 {
  border-width: 2px;
}
</style>

```

--------------------------------

### Vite Configuration for React and Tailwind CSS

Source: https://cva.style/docs/examples/react/tailwind-css

This configuration file sets up Vite to work with React and Tailwind CSS. Ensure you have the necessary plugins installed.

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});
```

--------------------------------

### Compound Variants Example

Source: https://cva.style/docs/getting-started/variants

Illustrates how to define compound variants that apply styles when multiple variant conditions are met. This snippet shows a basic structure for applying a class based on a combination of `intent` and `size`.

```typescript
import { cva } from "class-variance-authority";

const button = cva("…", {
  variants: {
    intent: { primary: "…", secondary: "…" },
    size: { small: "…", medium: "…
```

```typescript
  },
  compoundVariants: [
    // Applied via:
    //   `button({ intent: "primary", size: "medium" })`
    {
      intent: "primary",
      size: "medium",
      class: "…",
    },
  ],
});
```

--------------------------------

### Vue Project Main Entry Point

Source: https://cva.style/docs/examples/vue

The main.ts file initializes the Vue application and imports global styles.

```typescript
import { createApp } from "vue";
import "./app.css";
import App from "./App.vue";

createApp(App).mount("#app");

```

--------------------------------

### Project Dependencies and Scripts

Source: https://cva.style/docs/examples/react/tailwind-css

This package.json file lists the project's dependencies, including React, class-variance-authority, and Tailwind CSS, along with development scripts for building, checking types, and running the development server.

```json
{
  "name": "example-react-with-tailwindcss",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "pnpm check && vite build",
    "check": "tsc",
    "dev": "vite",
    "preview": "vite preview"
  },
  "dependencies": {
    "class-variance-authority": "latest",
    "react": "19.2.6",
    "react-dom": "19.2.6"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.2.4",
    "@types/react": "19.2.14",
    "@types/react-dom": "19.2.3",
    "@vitejs/plugin-react": "^5.1.2",
    "tailwindcss": "^4.3.0",
    "typescript": "6.0.3",
    "vite": "^7.3.2"
  },
  "engines": {
    "node": "22"
  }
}
```

--------------------------------

### Svelte Preprocessor Configuration

Source: https://cva.style/docs/examples/svelte

Sets up the Svelte preprocessor using vitePreprocess for Svelte projects.

```javascript
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

export default {
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),
};

```

--------------------------------

### React Entry Point

Source: https://cva.style/docs/examples/react/tailwind-css

Standard React application entry point using ReactDOM to render the main App component.

```tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./app";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

--------------------------------

### Project Dependencies and Scripts

Source: https://cva.style/docs/examples/react/css-modules

Package.json file defining project dependencies, including React and class-variance-authority, and build/dev scripts.

```json
{
  "name": "example-react-with-css-modules",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "pnpm check && vite build",
    "check": "tsc",
    "dev": "vite",
    "preview": "vite preview"
  },
  "dependencies": {
    "class-variance-authority": "latest",
    "react": "19.2.6",
    "react-dom": "19.2.6"
  },
  "devDependencies": {
    "@types/react": "19.2.14",
    "@types/react-dom": "19.2.3",
    "@vitejs/plugin-react": "^5.1.2",
    "typescript": "6.0.3",
    "vite": "^7.3.2"
  },
  "engines": {
    "node": "22"
  }
}
```

--------------------------------

### Svelte App Entry Point

Source: https://cva.style/docs/examples/svelte

Main TypeScript file for mounting the Svelte application. It imports global styles and the root App component.

```typescript
import "./app.css";
import App from "./App.svelte";
import { mount } from "svelte";

const app = mount(App, {
  target: document.getElementById("app")!,
});

export default app;
```

--------------------------------

### React Application Entry Point

Source: https://cva.style/docs/examples/react/css-modules

Standard React application entry point that renders the main App component and imports global CSS.

```tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./app";
import "./main.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

--------------------------------

### Importing and Using CSS Modules in React

Source: https://cva.style/docs/examples/react/css-modules

Demonstrates how to import a CSS module and apply its styles to a React component. Ensure your build tool (like Vite or Webpack) is configured to support CSS Modules.

```jsx
import React from 'react';
import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, CSS Modules!</h1>
      <p className={styles.text}>This is a paragraph with scoped styles.</p>
    </div>
  );
}

export default MyComponent;
```

--------------------------------

### Vite Configuration for React

Source: https://cva.style/docs/examples/react/css-modules

Basic Vite configuration file for a React project, enabling the React plugin.

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});
```

--------------------------------

### SvelteKit package.json Dependencies

Source: https://cva.style/docs/examples/svelte

Project dependencies and scripts for a SvelteKit application, including build, check, dev, and preview commands.

```json
{
  "name": "example-svelte",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "pnpm check && vite build",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "dev": "vite",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^7.1.2",
    "@tsconfig/svelte": "^5.0.8",
    "class-variance-authority": "latest",
    "svelte": "^5.55.5",
    "svelte-check": "^4.4.8",
    "tslib": "^2.8.1",
    "typescript": "6.0.3",
    "vite": "^7.3.2"
  },
  "engines": {
    "node": "22"
  }
}
```

--------------------------------

### React App with CSS Modules

Source: https://cva.style/docs/examples/react/css-modules

This snippet shows a basic React application structure utilizing CSS Modules for styling. It demonstrates how to import and apply styles.

```tsx
import { Button } from "./components";

const intents = [undefined, "primary", "secondary"] as const;
const sizes = [undefined, "medium", "small"] as const;
const isDisabled = [false, true] as const;

function App() {
  return (
    <>
      {intents.map((intent) => (
        <div key={intent || "default"} className="variant-table">
          <h2>{intent || "default"}</h2>
          <table>
            <thead>
              <tr>
                <th>Disabled</th>
                <th>Size</th>
                <th>Intent</th>
              </tr>
            </thead>
            <tbody>
              {isDisabled.map((disabled) =>
                sizes.map((size, index) => (
                  <tr key={index}>
                    {index === 0 && (
                      <td rowSpan={sizes.length + 1}>
                        {disabled ? "disabled" : "enabled"}
                      </td>
                    )}
                    <td>{size || "default"}</td>
                    <td>{intent || "default"}</td>
                    <td>
                      <Button disabled={disabled} size={size} intent={intent}>
                        Button
                      </Button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      ))}
    </>
  );
}

export default App;
```

--------------------------------

### Basic CSS Module Usage in React

Source: https://cva.style/docs/examples/react/css-modules

Import styles from a CSS Module file and apply them to a React component. Ensure the CSS file is named with the .module.css extension.

```jsx
import styles from './Button.module.css';

function Button() {
  return (
    <button className={styles.button}>
      Click me
    </button>
  );
}
```

```css
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
```

--------------------------------

### Composing Card Components

Source: https://cva.style/docs/getting-started/composing-components

Demonstrates how to create a reusable `card` component by composing a base `box` component with additional card-specific styles using `cx`. This pattern allows for extending components with custom variants and default styles.

```typescript
import type { VariantProps } from "class-variance-authority";
import { cva, cx } from "class-variance-authority";
 
/**
 * Box
 */
export type BoxProps = VariantProps<typeof box>;
export const box = cva(["box", "box-border"], {
  variants: {
    margin: { 0: "m-0", 2: "m-2", 4: "m-4", 8: "m-8" },
    padding: { 0: "p-0", 2: "p-2", 4: "p-4", 8: "p-8" },
  },
  defaultVariants: {
    margin: 0,
    padding: 0,
  },
});
 
/**
 * Card
 */
type CardBaseProps = VariantProps<typeof cardBase>;
const cardBase = cva(["card", "border-solid", "border-slate-300", "rounded"], {
  variants: {
    shadow: {
      md: "drop-shadow-md",
      lg: "drop-shadow-lg",
      xl: "drop-shadow-xl",
    },
  },
});
 
export interface CardProps extends BoxProps, CardBaseProps {}
export const card = ({ margin, padding, shadow }: CardProps = {}) =>
  cx(box({ margin, padding }), cardBase({ shadow }));

```

--------------------------------

### Vite Configuration for Vue Project

Source: https://cva.style/docs/examples/vue

Sets up Vite as the build tool for the Vue project, including the Vue plugin.

```typescript
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
});

```

--------------------------------

### Global Stylesheet for Svelte App

Source: https://cva.style/docs/examples/svelte

Basic CSS reset and global styles for a Svelte application, setting up default font and layout properties.

```css
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; }
#app { display: grid; width: 100%; height: 100%; padding: 1.5rem; }
```

--------------------------------

### Configure Tailwind CSS IntelliSense

Source: https://cva.style/docs/getting-started/installation

Add this configuration to your VS Code settings.json to enable autocompletion for cva class functions.

```json
{
  "tailwindCSS.classFunctions": ["cva", "cx"]
}
```

--------------------------------

### Basic CSS Module Structure

Source: https://cva.style/docs/examples/react/css-modules

Shows the basic structure of a CSS Module file. Class names defined here will be locally scoped to the component that imports this module.

```css
.container {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.title {
  color: navy;
  font-size: 2em;
}

.text {
  color: darkgreen;
  line-height: 1.6;
}
```

--------------------------------

### VS Code Extension Recommendation

Source: https://cva.style/docs/examples/svelte

Recommends the official Svelte VS Code extension for enhanced development experience.

```json
{ "recommendations": ["svelte.svelte-vscode"] }
```

--------------------------------

### `cva`

Source: https://cva.style/docs/api-reference

Builds a `cva` component. It takes a base class name and optional configuration for variants, compound variants, and default variants to create a reusable component function.

```APIDOC
## `cva`

### Description
Builds a `cva` component. It takes a base class name and optional configuration for variants, compound variants, and default variants to create a reusable component function.

### Signature
```javascript
const component = cva("base", options);
```

### Parameters

1.  `base` (string | string[] | clsx value): The base class name(s) for the component.
2.  `options` (object, optional): Configuration for variants.
    *   `variants` (object): Defines the different variant schemas for the component.
    *   `compoundVariants` (array): Defines variants based on a combination of previously defined variants.
    *   `defaultVariants` (object): Sets default values for the defined variants. Note: these default values can be removed by setting the variant to `null`.

### Returns
A `cva` component function.
```

--------------------------------

### TypeScript Configuration for React

Source: https://cva.style/docs/examples/react/css-modules

TypeScript configuration file for a React project using Vite, specifying module resolution and JSX settings.

```json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
```

--------------------------------

### Vite Package Dependencies

Source: https://cva.style/docs/examples/svelte

Lists the dependencies for Vite, a build tool for modern web projects, including its dev dependencies.

```json
{ "version": "7.3.5", "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.5.tgz", "integrity": "sha512-KuOaNhcnGFN2zIPGA7wRmzF+lJA1sea7rHq17aiJ++9lzY1WWG6Jpwqwe1KNbRVPIqHmr8GLYx7jbrQcN/7/ww==", "dev": true, "requires": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "fsevents": "~2.3.3", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" } }
```

--------------------------------

### Vue Project Package JSON Configuration

Source: https://cva.style/docs/examples/vue

Defines project metadata, scripts for development and building, and dependencies for a Vue.js project.

```json
{ "name": "example-vue", "private": true, "type": "module", "scripts": { "build": "pnpm check && vite build", "check": "vue-tsc", "dev": "vite", "preview": "vite preview" }, "dependencies": { "class-variance-authority": "latest", "vue": "^3.5.34" }, "devDependencies": { "@vitejs/plugin-vue": "^6.0.6", "typescript": "6.0.3", "vite": "^7.3.2", "vue-tsc": "^3.2.8" }, "engines": { "node": "22" } } 

```

--------------------------------

### Global CSS for Vue App

Source: https://cva.style/docs/examples/vue

Basic CSS resets and styling for the Vue application's root element.

```css
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }

html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; }

#app { display: grid; width: 100%; height: 100%; padding: 1.5rem; }

```

--------------------------------

### Vue App Component Structure

Source: https://cva.style/docs/examples/vue

A basic App.vue component demonstrating a simple table structure for displaying button states.

```vue
 |  |  {{ intent || "default" }}   
---|---|---
{{ typeof disabled === "undefined" ? "enabled" : "disabled" }}  | {{ size || "default" }} |  {{ intent || "default" }} button   

```

--------------------------------

### Svelte Check Package Dependencies

Source: https://cva.style/docs/examples/svelte

Details the dependencies for the svelte-check package, used for type checking Svelte components.

```json
{ "version": "4.6.0", "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.6.0.tgz", "integrity": "sha512-KhVnDFDSid57mmZtHz8gfW8AAGylOZ0vPnOIzVmAL+urzwK8sBYXRss953gD8T0OdgAQ11mdWhE6uadmtOz8TQ==", "dev": true, "requires": { "@jridgewell/trace-mapping": "^0.3.25", "@sveltejs/load-config": "0.1.1", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" } }
```

--------------------------------

### Build a cva component

Source: https://cva.style/docs/api-reference

Use the `cva` function to create a component function. It takes base class names and an optional options object for variants, compound variants, and default variants.

```javascript
const component = cva("base", options);
```

--------------------------------

### Main CSS for React App

Source: https://cva.style/docs/examples/react/css-modules

This CSS file provides base styling for the React application, including layout and table styles, intended to be used with CSS Modules.

```css
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
}

#root {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
}

.variant-table {
  position: relative;
  height: max-content;
  width: max-content;
  align-self: center;
  justify-self: center;
}

.variant-table :where(th, td) {
  padding: 0.5rem;
}
```

--------------------------------

### Svelte Package Dependencies

Source: https://cva.style/docs/examples/svelte

Lists the dependencies for the Svelte package, including development dependencies and their versions.

```json
{ "version": "5.56.3", "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.56.3.tgz", "integrity": "sha512-w7JvrM5IFl5cmfbY0TLik9o7mjRUJmRMhOR51tBPu708Gr/MjbGs7VnJnr/B0CaXeI4vtnOh7RKxDr0cwhMdDA==", "dev": true, "requires": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.10", "@types/estree": "^1.0.5", "@types/trusted-types": "^2.0.7", "acorn": "^8.12.1", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.8.1", "esm-env": "^1.2.1", "esrap": "^2.2.11", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }
```

--------------------------------

### Tailwind CSS Configuration

Source: https://cva.style/docs/examples/react/tailwind-css

This is the main CSS file that imports Tailwind CSS. It sets up basic styles for the root element.

```css
@import "tailwindcss";

@layer base {
  :where(html, body, #root) {
    width: 100%;
    height: 100%;
  }
  :where(#root) {
    @apply grid p-6;
  }
}
```

--------------------------------

### SvelteKit tsconfig.json Configuration

Source: https://cva.style/docs/examples/svelte

TypeScript configuration for SvelteKit projects, extending base Svelte configurations and enabling JavaScript type checking.

```json
{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    /**
     * Typecheck JS in `.svelte` and `.js` files by default.
     * Disable checkJs if you'd like to use dynamic types in JS.
     * Note that setting allowJs false does not prevent the use
     * of JS in `.svelte` files.
     */
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true
  },
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
```

--------------------------------

### Vite Configuration for Svelte

Source: https://cva.style/docs/examples/svelte

Configures Vite to use the Svelte plugin for building Svelte applications.

```typescript
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
});

```

--------------------------------

### Vite Environment Declaration

Source: https://cva.style/docs/examples/svelte

A TypeScript declaration file for Vite environment variables.

```typescript
///  ///  
```

--------------------------------

### Dynamic Class Names

Source: https://cva.style/docs/examples/react/css-modules

Combine multiple class names, including dynamic ones, using template literals or a helper function like `clsx`. This allows for conditional styling.

```jsx
import styles from './MyComponent.module.css';
import clsx from 'clsx';

function MyComponent({ isActive }) {
  return (
    <div className={clsx(styles.base, {
      [styles.active]: isActive,
      [styles.inactive]: !isActive
    })}>
      Dynamic Style
    </div>
  );
}
```

--------------------------------

### Define Button Component Variants

Source: https://cva.style/docs/getting-started/variants

This snippet demonstrates how to define a `button` component with multiple variants (intent, size, disabled) and compound variants using `cva`. It shows how to call the `button` function with different variant props to generate the appropriate CSS classes.

```typescript
import { cva } from "class-variance-authority";

const button = cva(["font-semibold", "border", "rounded"], {
  variants: {
    intent: {
      primary: ["bg-blue-500", "text-white", "border-transparent"],
      // **or**
      // primary: "bg-blue-500 text-white border-transparent hover:bg-blue-600",
      secondary: ["bg-white", "text-gray-800", "border-gray-400"],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
    // `boolean` variants are also supported!
    disabled: {
      false: null,
      true: ["opacity-50", "cursor-not-allowed"],
    },
  },
  compoundVariants: [
    {
      intent: "primary",
      disabled: false,
      class: "hover:bg-blue-600",
    },
    {
      intent: "secondary",
      disabled: false,
      class: "hover:bg-gray-100",
    },
    {
      intent: "primary",
      size: "medium",
      // **or** if you're a React.js user, `className` may feel more consistent:
      // className: "uppercase"
      class: "uppercase",
    },
  ],
  defaultVariants: {
    intent: "primary",
    size: "medium",
    disabled: false,
  },
});

button();
// => "font-semibold border rounded bg-blue-500 text-white border-transparent text-base py-2 px-4 hover:bg-blue-600 uppercase"

button({ disabled: true });
// => "font-semibold border rounded bg-blue-500 text-white border-transparent text-base py-2 px-4 opacity-50 cursor-not-allowed uppercase"

button({ intent: "secondary", size: "small" });
// => "font-semibold border rounded bg-white text-gray-800 border-gray-400 text-sm py-1 px-2 hover:bg-gray-100"
```

--------------------------------

### Svelte App Component Structure

Source: https://cva.style/docs/examples/svelte

The main Svelte component (`App.svelte`) demonstrating conditional rendering and loops for intents, disabled states, and sizes. It includes a table for displaying button states.

```svelte
<script lang="ts">
  import { Button } from "./lib/button";

  let intents = ["primary", "secondary", "danger", "default"];
  let isDisabled = [true, false];
  let sizes = ["sm", "md", "lg"];
</script>

{#each intents as intent}
  {#each isDisabled as disabled}
    {#each sizes as size, index}
      {#if index === 0}
        <Button {intent} {disabled} {size} />
      {:else}
        <Button {intent} {disabled} {size} />
      {/if}
    {/each}
  {/each}
{/each}

<table>
  <thead>
    <tr>
      <th>State</th>
      <th>Size</th>
      <th>Intent</th>
    </tr>
  </thead>
  <tbody>
    {#each intents as intent}
      {#each isDisabled as disabled}
        {#each sizes as size, index}
          <tr>
            <td>{disabled ? "disabled" : "enabled"}</td>
            <td>{size || "default"}</td>
            <td>{intent || "default"}</td>
          </tr>
        {/each}
      {/each}
    {/each}
  </tbody>
</table>

<Button intent="primary" />
<Button intent="secondary" disabled />
<Button intent="danger" size="sm" />
<Button intent="default" size="lg" disabled />

```

--------------------------------

### Extending Button Component with Classes

Source: https://cva.style/docs/getting-started/extending-components

Demonstrates how to pass additional classes to a cva-defined button component using both the `class` and `className` props. This allows for inline styling or utility class application.

```typescript
import { cva } from "class-variance-authority";

const button = cva(/* … */);

button({ class: "m-4" });
// => "…buttonClasses m-4"

button({ className: "m-4" });
// => "…buttonClasses m-4"
```

--------------------------------

### Node TypeScript Configuration

Source: https://cva.style/docs/examples/svelte

Configuration for TypeScript when compiling Node.js specific code, using ESNext modules and bundler resolution.

```json
{ "compilerOptions": { "composite": true, "module": "ESNext", "moduleResolution": "bundler" }, "include": ["vite.config.ts"] }
```

--------------------------------

### `cx`

Source: https://cva.style/docs/api-reference

Concatenates class names, serving as an alias for the `clsx` utility. It takes an array of classes to be joined into a single string.

```APIDOC
## `cx`

### Description
Concatenates class names, serving as an alias for the `clsx` utility. It takes an array of classes to be joined into a single string.

### Signature
```javascript
const className = cx(classes);
```

### Parameters

*   `classes` (array): An array of classes to be concatenated. Refer to `clsx` usage for more details.

### Returns
`string`: The concatenated string of class names.
```

--------------------------------

### CSS Module Styles for Button

Source: https://cva.style/docs/examples/react/css-modules

Defines the base styles and variant-specific styles for the button component using CSS Modules. Includes hover effects and disabled states.

```css
.base {
  display: inline-flex;
  border-width: 1px;
  border-style: solid;
}

.primary {
  color: rgb(255 255 255);
  background-color: rgb(59 130 246);
  border: transparent;
}

.primary.enabled:hover {
  background-color: rgb(37 99 235);
}

.secondary {
  background-color: rgb(255 255 255);
  color: rgb(31 41 55);
  border-color: rgb(156 163 175);
}

.secondary.enabled:hover {
  background-color: rgb(243 244 246);
}

.small {
  font-size: 0.875rem /* 14px */;
  line-height: 1.25rem /* 20px */;
  padding: 0.25rem 0.5rem;
}

.medium {
  font-size: 1rem /* 16px */;
  line-height: 1.5rem /* 24px */;
  padding: 0.5rem 1rem;
}

.primaryMedium {
  text-transform: uppercase;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

--------------------------------

### Applying Multiple CSS Modules Classes

Source: https://cva.style/docs/examples/react/css-modules

Combine multiple class names from a CSS Module by concatenating them. This allows for more complex styling combinations.

```jsx
import styles from './Alert.module.css';

function Alert({ type }) {
  return (
    <div className={`${styles.alert} ${styles[type]}`}>
      This is an alert message.
    </div>
  );
}
```

```css
.alert {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
```

--------------------------------

### Importing and Using Styles

Source: https://cva.style/docs/examples/react/css-modules

Import your CSS module and access its class names as properties of the imported object. This is the standard way to apply scoped styles in React.

```jsx
import styles from './MyComponent.module.css';

function MyComponent() {
  return <div className={styles.myClass}>Hello World</div>;
}
```

--------------------------------

### 11ty Button Component with Tailwind CSS

Source: https://cva.style/docs/examples/11ty

This snippet demonstrates how to create a reusable button component in 11ty using class-variance-authority and Tailwind CSS. It defines different intents and sizes, with compound variants and default styles.

```javascript
// button.11ty.js
const { cva } = require("class-variance-authority");
 
// ⚠️ Disclaimer: Use of Tailwind CSS is optional
const button = cva("button", {
  variants: {
    intent: {
      primary: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600",
      ],
      secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});
 
module.exports = function ({ label, intent, size }) {
  return `<button class="${button({ intent, size })}">${label}</button>`;
};

```

--------------------------------

### Composing Styles

Source: https://cva.style/docs/examples/react/css-modules

Compose styles from multiple CSS modules or within the same module to create more complex and reusable style combinations. This helps in managing larger style sets.

```css
/* MyComponent.module.css */
.base {
  padding: 10px;
  border-radius: 4px;
}

.primary {
  background-color: blue;
  color: white;
}

.secondary {
  background-color: gray;
  color: black;
}

.card {
  composes: base from './MyComponent.module.css';
  composes: primary from './MyComponent.module.css';
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
```

```jsx
import styles from './MyComponent.module.css';

function MyComponent() {
  return <div className={styles.card}>Card Content</div>;
}
```

--------------------------------

### Vue Project TypeScript Configuration

Source: https://cva.style/docs/examples/vue

Configures TypeScript compiler options for a Vue.js project, including module resolution and JSX settings.

```json
{ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "module": "ESNext", "moduleResolution": "bundler", "strict": true, "jsx": "preserve", "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "lib": ["ESNext", "DOM"], "skipLibCheck": true, "noEmit": true }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }] } 

```

--------------------------------

### Svelte Button Component

Source: https://cva.style/docs/examples/svelte

A basic Svelte component for a button that can render child content.

```svelte
 {@render children?.()}  
```

--------------------------------

### Targeting Multiple Variant Conditions in Compound Variants

Source: https://cva.style/docs/getting-started/variants

Shows how to use an array to target multiple variant conditions within a single compound variant rule. This allows a single `class` to be applied when either of the specified `intent` values are present with the given `size`.

```typescript
import { cva } from "class-variance-authority";

const button = cva("…", {
  variants: {
    intent: { primary: "…", secondary: "…
```

```typescript
    size: { small: "…", medium: "…
```

```typescript
  },
  compoundVariants: [
    // Applied via:
    //   `button({ intent: "primary", size: "medium" })`
    //     or
    //   `button({ intent: "secondary", size: "medium" })`
    {
      intent: ["primary", "secondary"],
      size: "medium",
      class: "…",
    },
  ],
});
```

--------------------------------

### Define Button Variants with cva

Source: https://cva.style/docs/examples/astro

This snippet defines a reusable button component in Astro using `class-variance-authority` (cva) to manage different intents and sizes. It requires importing `cva` and `HTMLAttributes` from Astro.

```astro
---
import type { 
HTMLAttributes } 
from "astro/types";
import { cva, type 
VariantProps } 
from 
"class-variance-authority";

const button = cva
("button", {
variants: {
intent: {
primary: 
["bg-blue-500", 
"text-white",
"border-transparent"],
secondary: 
["bg-white", 
"text-gray-800", 
"border-gray-400"],
},
size: {
small: 
["text-sm", 
"py-1", 
"px-2"],
medium: 
["text-base", 
"py-2", 
"px-4"],
large: 
["text-lg", 
"py-3", 
"px-6"],
},
},
defaultVariants: {
intent: "primary",
size: "medium",
},
});

type ButtonProps = VariantProps<typeof button> &
HTMLAttributes<HTMLButtonElement>;
---
<button class={button({ intent, size, className }) } {...props}>
  <slot />
</button>
```

--------------------------------

### Dynamic Class Names with CSS Modules

Source: https://cva.style/docs/examples/react/css-modules

Conditionally apply CSS Module classes based on component props or state. This is useful for dynamic styling.

```jsx
import styles from './Card.module.css';

function Card({ isHighlighted }) {
  const cardClasses = `${styles.card} ${isHighlighted ? styles.highlighted : ''}`;

  return (
    <div className={cardClasses}>
      Card Content
    </div>
  );
}
```

```css
.card {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
}

.highlighted {
  border-color: yellow;
  box-shadow: 0 0 10px yellow;
}
```

--------------------------------

### Dynamic Text Content Generation

Source: https://cva.style/docs/examples/other-use-cases

Use `cva` to conditionally render different text strings based on variant props. This is useful for creating dynamic messages or UI elements.

```javascript
const greeter = cva("Good morning!", {
  variants: {
    isLoggedIn: {
      true: "Here's a secret only logged in users can see",
      false: "Log in to find out more…",
    },
  },
  defaultVariants: {
    isLoggedIn: "false",
  },
});

greeter();
// => "Good morning! Log in to find out more…"

greeter({ isLoggedIn: "true" });
// => "Good morning! Here's a secret only logged in users can see"
```

--------------------------------

### BEM CSS Classes

Source: https://cva.style/docs/examples/bem

Defines base, modifier, and size variations for a button component using BEM naming conventions. This CSS serves as the foundation for the JavaScript component.

```css
.button {
  /* */
}

.button--primary {
  /* */
}
.button--secondary {
  /* */
}

.button--small {
  /* */
}
.button--medium {
  /* */
}

.button--primary-small {
  /* */
}
```

--------------------------------

### JavaScript Button Component with class-variance-authority

Source: https://cva.style/docs/examples/bem

Implements a button component using class-variance-authority, mapping BEM-style variants (intent, size) and compound variants to CSS classes. Shows how to generate class strings based on component props.

```javascript
import { cva } from "class-variance-authority";

const button = cva("button", {
  variants: {
    intent: {
      primary: "button--primary",
      secondary: "button--secondary",
    },
    size: {
      small: "button--small",
      medium: "button--medium",
    },
  },
  compoundVariants: [
    { intent: "primary", size: "medium", class: "button--primary-small" },
  ],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

button();
// => "button button--primary button--medium"

button({ intent: "secondary", size: "small" });
// => "button button--secondary button--small"
```

--------------------------------

### React Button Component with CVA and Tailwind CSS

Source: https://cva.style/docs/examples/react/tailwind-css

Defines a reusable React button component using class-variance-authority (cva) to manage Tailwind CSS classes based on variants like intent and size. Useful for creating a consistent design system.

```typescript
import React from 
"react";
import { cva, type 
VariantProps } 
from 
"class-variance-aut
hority";

const button = cva
("button", {
  variants: {
    intent: {
      primary: 
        ["bg-blue-500
", 
          "text-white",
          "border-trans
parent"],
      secondary: 
        ["bg-white", 
          "text-gray-80
0", 
          "border-gray-
400"],
    },
    size: {
      small: 
        ["text-sm", 
          "py-1", 
          "px-2"],
      medium: 
        ["text-base",
          "py-2", 
          "px-3"],
    },
  },
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled">, VariantProps<typeof button> {}

export const Button: React.FC<ButtonProps> = ({ className, intent, size, disabled, ...props }) => (
  <button className={button({ intent, size, className })} disabled={disabled} {...props} />
);
```