### Svelte App Setup

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

Basic Svelte app setup including CSS import and mounting 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;
```

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

### Install CVA with npm

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

Use this command to install the beta version of CVA using npm.

```bash
npm i cva@beta
```

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

### Install CVA with pnpm

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

Use this command to install the beta version of CVA using pnpm.

```bash
pnpm i cva@beta
```

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

### Install CVA with bun

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

Use this command to add the beta version of CVA using bun.

```bash
bun add cva@beta
```

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

### Install Tailwind CSS

Source: https://beta.cva.style/examples/react/tailwindcss

Install Tailwind CSS and its peer dependencies using npm or yarn. This is the initial setup step for using Tailwind CSS in your project.

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

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

### Install CVA with yarn

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

Use this command to add the beta version of CVA using yarn.

```bash
yarn add cva@beta
```

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

### CSS Module File Example

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

Example of a CSS Module file (`.module.css`) defining scoped styles. These class names will be automatically transformed into unique identifiers during the build process.

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

.title {
  color: navy;
  font-size: 24px;
}

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

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

### CSS Module File Example

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

Example of a CSS Module file (`.module.css`) defining local class names. These class names are automatically made unique to prevent global scope pollution.

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

.title {
  color: navy;
  font-size: 24px;
}

.text {
  color: #333;
  line-height: 1.5;
}
```

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

### Svelte App.svelte Structure

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

Example structure for an App.svelte file demonstrating loops and conditional rendering.

```svelte
<script>
  let intents = ['primary', 'secondary'];
  let isDisabled = [true, false];
  let sizes = ['small', 'medium', 'large'];
</script>

{#each intents as intent}
  {#each isDisabled as disabled}
    {#each sizes as size, index}
      {#if index === 0}
        {#each intents as intent}
        {/each}
      {/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>
            <td><button>{intent || "default"} button</button></td>
          </tr>
        {/each}
      {/each}
    {/each}
  </tbody>
</table>
```

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

### Responsive Variants Example with Tailwind CSS

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

Demonstrates how to achieve responsive variants by conditionally rendering elements based on screen size using Tailwind CSS and CVA.

```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>
  </>
);
```

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

### CSS Module File with Composed Styles

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

Example CSS Module file demonstrating style composition. The `.primary` class can be combined with `.button` to create a primary button style.

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

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

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

### Basic CSS Module Example

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

Define styles in a CSS Module file. These styles are locally scoped to the component.

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

.button:hover {
  background-color: darkblue;
}
```

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

### Example Usage with tailwind-merge

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

Demonstrates how `tailwind-merge` resolves class conflicts, ensuring that variant styles take precedence over base styles.

```typescript
import { cx, cva } from "../cva.config";


export const button = cva({
  // 1. `twMerge` strips out `bg-gray-200`…
  base: "font-semibold bg-gray-200 border rounded",
  variants: {
    intent: {
      // 2. …as variant `bg-*` values take precedence
      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",
    },
  },
  defaultVariants: {
    intent: "primary",
  },
});


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


cx("bg-gray-200", "bg-blue-500");
// => "bg-blue-500"
```

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

### React Compound Component Example

Source: https://beta.cva.style/getting-started/compound-components

Demonstrates the structure of a compound component in React using CVA. This pattern is useful for building complex UI elements like accordions.

```jsx
import * as Accordion from "./Accordion";


function Example() {
  return (
    <Accordion.Root>
      <Accordion.Item>
        <Accordion.Header>Section 1</Accordion.Header>
        <Accordion.Content>Content 1</Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
}
```

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

### Using the React Button Component with a Render Prop

Source: https://beta.cva.style/getting-started/polymorphism

Example of how to use the custom React Button component, passing a render prop to customize the rendered element. Shows how the component applies styles.

```javascript
import { Button } from "./components/button";


// Renders:
//   <a href="/sign-up" class="button bg-blue-500 text-white border-transparent hover:bg-blue-600">
//     Sign up
//   </a>
export default () => <Button render={<a href="/contact" />}>Contact</Button>;
```

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

### Vite Configuration for React and Tailwind CSS

Source: https://beta.cva.style/examples/react/tailwindcss

This configuration file sets up Vite to use the React plugin and the Tailwind CSS plugin. Ensure these plugins are installed in your project.

```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()],
});

```

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

### Button CSS Module File Example

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

Define base button styles and conditional primary button styles in a CSS Module. The `composes` keyword can also be used for style inheritance.

```css
.button {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

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

.secondary {
  background-color: grey;
  color: black;
}
```

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

### Example React Component with Tailwind CSS

Source: https://beta.cva.style/examples/react/tailwindcss

A basic React component demonstrating the use of Tailwind CSS utility classes for styling. Apply classes directly to your JSX elements.

```jsx
function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-md">
        <h1 className="text-2xl font-bold mb-4">Welcome to Tailwind CSS with React!</h1>
        <p className="text-gray-600">This is a styled paragraph using Tailwind utility classes.</p>
        <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          Click Me
        </button>
      </div>
    </div>
  )
}

export default App
```

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

### Vue Button Component with Variants

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

Defines a Vue.js Button component using the `<script setup>` syntax. It utilizes class-variance-authority (cva) to manage different visual variants (intent, size, disabled state) for the button.

```vue
<script setup
lang="ts">
import { cva, type
VariantProps }
from
"class-variance-aut
hority";
const button = cva
("button", {
variants: {
intent: {
primary:
"primary",
secondary:
"secondary",
},
size: {
small:
"small",
medium:
"medium",
},
disabled: {
true:
"disabled",
false:
"enabled",
},
},
compoundVariants: [
{
intent:

```

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

### React DOM Entry Point

Source: https://beta.cva.style/examples/react/tailwindcss

This file sets up the root React DOM element and renders the main App component. It's the entry point for the React application.

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

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

```

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

### Neovim IntelliSense Configuration

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

Set up `lspconfig.tailwindcss` in Neovim to enable autocompletion for `cva` and `cx`.

```lua
require 'lspconfig'.tailwindcss.setup({
  settings = {
    tailwindCSS = {
      classFunctions = { "cva", "cx" },
    },
  },
})
```

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

### React Main Entry Point

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

Standard React application entry point that renders the main App component and includes 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>
);

```

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

### Vite Configuration for React

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

Basic Vite configuration file to enable React support using the @vitejs/plugin-react plugin.

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

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

```

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

### Vue App Entry Point

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

The main entry point for the Vue application. It imports necessary CSS and the root App component, then mounts the application to the DOM.

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

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

```

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

### Zed IntelliSense Configuration

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

Configure the `tailwindcss-language-server` in Zed to enable autocompletion for `cva` and `cx`.

```json
{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "classFunctions": ["cva", "cx"]
      }
    }
  }
}
```

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

### VS Code Extensions Recommendation

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

This JSON file recommends extensions for Visual Studio Code, specifically highlighting the official Svelte extension for enhanced development experience.

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

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

### Configure cva, cx, and compose with defineConfig

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

The `defineConfig` function generates `cva`, `cx`, and `compose` functions based on your project's configuration. Store this configuration in a `cva.config.ts` file for cross-project import.

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


export const { cva, cx, compose } = defineConfig(options);
```

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

### VS Code IntelliSense Configuration

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

Add this configuration to your `.vscode/settings.json` to enable autocompletion for `cva` and `cx` in Visual Studio Code.

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

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

### Vite Configuration for Svelte

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

This snippet shows the basic configuration for Vite to use the Svelte plugin. It's essential for building and serving Svelte applications.

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

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

```

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

### Project Dependencies in package.json

Source: https://beta.cva.style/examples/react/tailwindcss

This package.json file lists the project's dependencies, including React, ReactDOM, and cva. It also specifies development dependencies like Vite, Tailwind CSS, and TypeScript.

```json
{
  "name": "example-beta-react-with-tailwindcss",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "pnpm check && vite build",
    "check": "tsc",
    "dev": "vite",
    "preview": "vite preview"
  },
  "dependencies": {
    "cva": "beta",
    "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://beta.cva.style/examples/svelte

This configuration file sets up preprocessors for Svelte, specifically using vitePreprocess. This is used for tasks like SCSS compilation or TypeScript integration within Svelte components.

```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(),
};

```

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

### Vite Configuration

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

This snippet shows the 'vite' package configuration from package.json. It outlines the version and integrity hash, indicating it's a development dependency.

```json
{ "vite": { "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" } } }
```

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

### Implement CVA with BEM Classes

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

Configuration of CVA variants to output BEM-compliant class strings.

```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"
```

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

### Project Dependencies in package.json

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

Defines project metadata, scripts, and dependencies for a React project using cva and Vite.

```json
{
  "name": "example-beta-react-with-css-modules",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "pnpm check && vite build",
    "check": "tsc",
    "dev": "vite",
    "preview": "vite preview"
  },
  "dependencies": {
    "cva": "beta",
    "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 CSS

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

Basic CSS for the Svelte application, setting up global styles and layout.

```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; }
```

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

### Global CSS Styles

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

Basic global CSS styles for resetting margins, setting font properties, and basic layout for the 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;
}

#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;
}

```

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

### Vite Configuration for Vue Project

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

The Vite configuration file for the Vue project. It sets up the development server and build process, primarily by integrating the Vue plugin.

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

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

```

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

### CVA Configuration with tailwind-merge

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

Initialize CVA with `tailwind-merge` to automatically handle style conflicts and merge Tailwind CSS classes.

```typescript
import { defineConfig } from "cva";
import { twMerge } from "tailwind-merge";


export const { cva, cx, compose } = defineConfig({
  hooks: {
    onComplete: (className) => twMerge(className),
  },
});
```

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

### TypeScript Configuration

Source: https://beta.cva.style/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"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

```

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

### Applying cva Class to an Anchor Element

Source: https://beta.cva.style/getting-started/polymorphism

Demonstrates applying a cva class to a standard HTML anchor element for styling. This approach is framework-agnostic.

```javascript
import { button } from "./components/button";


export default () => (
  <a className={button()} href="/sign-up">
    Sign up
  </a>
);
```

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

### `defineConfig`

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

Generates `cva`, `cx`, and `compose` functions based on your preferred configuration. Typically stored in a `cva.config.ts` file for project-wide import.

```APIDOC
## `defineConfig`

### Description
Generates `cva`, `cx`, and `compose` functions based on your preferred configuration. This function is intended to be used in a configuration file (e.g., `cva.config.ts`) and imported across your project.

### Parameters
* `options` (object) - Configuration options.
  * `hooks` (object) - Optional hooks for customization.
    * `onComplete` (function) - A callback function that returns a concatenated class string of all classes passed to `cx`, `cva`, or `compose`.

### Returns
An object containing the generated `cva`, `cx`, and `compose` functions.
```

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

### TypeScript Node Configuration

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

This JSON configuration file sets up TypeScript for Node.js environments within a Svelte project. It specifies module resolution and includes Vite configuration files.

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

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

### `cva`

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

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

```APIDOC
## `cva`

### Description
Builds a `cva` component by defining its base styles, variants, and default configurations.

### Parameters
* `options` (object) - Configuration object for the component.
  * `base` (string | string[] | clsx value) - The base class name(s) for the component.
  * `variants` (object) - Defines the different variant schemas for the component.
  * `compoundVariants` (array) - Specifies variants based on a combination of previously defined variants.
  * `defaultVariants` (object) - Sets default values for the defined variants.

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

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

### Vue Project Dependencies and Scripts

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

Defines the project's name, private status, module type, and essential scripts for development and building. It lists core dependencies like `class-variance-authority` and `vue`, along with development dependencies for Vite and TypeScript.

```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"
  }
}

```

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

### Vue App Component Structure

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

A basic structure for the main App.vue component, demonstrating how to display dynamic content like 'size' and 'intent' which can be controlled by props or state.

```html
<template>
  |
  |
  {{ typeof disabled === "undefined" ? "enabled" : "disabled" }}
  |
  {{ size || "default" }}
  |
  {{ intent || "default" }} button
</template>

```

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

### Create a cva component

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

Use the `cva` function to build a reusable component. It accepts options for base classes, variants, compound variants, and default variants.

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


const component = cva(options);
```

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

### Base CSS for Vue App

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

Provides essential base styling for the HTML and body elements, ensuring full viewport usage and setting up a sans-serif font stack. It also styles the main #app container for a grid layout.

```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;
}

```

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

### Importing Styles in React

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

Import styles from a CSS Module file and apply them to elements using the imported object.

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

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

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

### App Component Rendering Nav with Density Variants

Source: https://beta.cva.style/examples/react/tailwindcss

Renders a React component that utilizes the Nav component with different density variants ('compact' and 'cozy'). It also includes a list of items generated dynamically.

```tsx
import { cx } from "cva";
import * as Nav from "./components/nav";

const density = ["compact", "cozy"] as const;

function App() {
  return (
    <>
      {density.map((key) => (
        <Nav.Root key={key} density={key}>
          <Nav.Item>Home</Nav.Item>
          <Nav.Item>About</Nav.Item>
          <Nav.Item>Contact</Nav.Item>
        </Nav.Root>
      ))}
      {density.map((key) => (
        <Nav.Root key={key} density={key}>
          <Nav.Item>Home</Nav.Item>
          <Nav.Item>About</Nav.Item>
          <Nav.Item>Contact</Nav.Item>
        </Nav.Root>
      ))}

      <hr />

      {[0, 1, 2, 3, 4].map((_, i) => (
        <Nav.Root key={i}>
          <Nav.Item>Item {i + 1}</Nav.Item>
        </Nav.Root>
      ))}
    </>
  );
}

export default App;
```

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

### Svelte Check Dependencies

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

This snippet details the dependencies for the 'svelte-check' package, commonly used for type checking Svelte components. It lists required packages for its operation.

```json
{ "svelte-check": { "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" } } }
```

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

### Global Styles with CSS Modules

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

Apply global styles or override specific module styles by using the `:global` selector within a CSS Module file.

```css
@layer base, theme, components, utilities;

@layer base {
  :global(body) {
    font-family: sans-serif;
    margin: 0;
  }

  :global(.some-external-class) {
    border-width: 2px;
  }
}
```

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

### Tailwind CSS Configuration for Vite

Source: https://beta.cva.style/examples/react/tailwindcss

This CSS file imports Tailwind CSS and sets up base styles for the HTML, body, and root elements. It applies a grid layout to the root element.

```css
@import "tailwindcss";

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

```

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

### Svelte Project Dependencies

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

Essential development and build dependencies for a Svelte project using Vite and class-variance-authority.

```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"
  }
}
```

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

### Configure Tailwind CSS Template Paths

Source: https://beta.cva.style/examples/react/tailwindcss

Configure your `tailwind.config.js` file to scan your template files for class names. This ensures Tailwind generates the necessary CSS for your components.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

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

### Define Compound Variants

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

Illustrates how to define compound variants that apply when multiple variant conditions are met. This is useful for creating specific style combinations.

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


const button = cva({
  base: "…",
  variants: {
    intent: { primary: "…", secondary: "…" },
    size: { small: "…", medium: "…" },
  },
  compoundVariants: [
    // Applied via:
    //   `button({ intent: "primary", size: "medium" })`
    {
      intent: "primary",
      size: "medium",
      class: "…",
    },
  ],
});
```

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

### `compose`

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

Shallowly merges any number of `cva` components into a single, unified component. This is useful for creating more complex components from smaller, reusable ones.

```APIDOC
## `compose`

### Description
Shallowly merges any number of `cva` components into a single component. This allows for the composition of multiple component configurations.

### Parameters
* `options` (array) - An array of `cva` components to be merged.

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

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

### WebStorm IntelliSense Configuration

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

Configure Tailwind CSS settings in WebStorm to enable autocompletion for `cva` and `cx`. Ensure you are using WebStorm 2023.1 or later.

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

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

### Target Multiple Variant Conditions

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

Shows how to apply a class to multiple variant conditions simultaneously using arrays. This simplifies defining styles that apply to several combinations.

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


const button = cva({
  base: "…",
  variants: {
    intent: { primary: "…", secondary: "…" },
    size: { small: "…", medium: "…" },
  },
  compoundVariants: [
    // Applied via:
    //   `button({ intent: "primary", size: "medium" })`
    //     or
    //   `button({ intent: "secondary", size: "medium" })`
    {
      intent: ["primary", "secondary"],
      size: "medium",
      class: "…",
    },
  ],
});
```

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

### Handling Required Variants with TypeScript Utility Types

Source: https://beta.cva.style/getting-started/typescript

Demonstrates how to enforce required variants using TypeScript's `Required` and `Pick` utility types. This ensures that specific variants are always provided when calling the CVA function.

```typescript
import { cva, type VariantProps } from "cva";


export type ButtonVariantProps = VariantProps<typeof buttonVariants>;
export const buttonVariants = cva({
  base: "…",
  variants: {
    optional: { a: "…", b: "…" },
    required: { a: "…", b: "…" },
  },
});


/**
 * Button
 */
export interface ButtonProps
  extends
    Omit<ButtonVariantProps, "required">
    Required<Pick<ButtonVariantProps, "required">> {}


export const button = (props: ButtonProps) => buttonVariants(props);


// ❌ TypeScript Error:
// Argument of type "{}": is not assignable to parameter of type "ButtonProps".
//   Property "required" is missing in type "{}" but required in type
//   "ButtonProps".
button({});


// ✅
button({ required: "a" });
```

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

### Importing and Using CSS Modules in React

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

Import styles from a CSS Module file and apply them to JSX elements. This ensures styles are scoped to the component.

```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 text uses scoped styles.</p>
    </div>
  );
}

export default MyComponent;
```

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

### Importing and Using CSS Modules in React

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

Import styles from a CSS Module file and apply them to JSX elements. This approach ensures that class names are locally scoped to the component.

```javascript
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;
```

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

### Svelte TypeScript Configuration

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

TypeScript configuration for a Svelte project, extending default Svelte settings 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" }]
}
```

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

### `cx`

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

Concatenates class names, serving as an alias for the `clsx` utility. It takes an array of classes and returns a single string of concatenated class names.

```APIDOC
## `cx`

### Description
Concatenates class names, functioning as an alias for `clsx`. It is used to combine multiple class names into a single string.

### Parameters
* `classes` (array) - An array of classes to be concatenated. Refer to `clsx` usage for details.

### Returns
* `string` - A single string containing all concatenated class names.
```

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

### Disable a Variant

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

Demonstrates how to disable a variant by providing a `null` value for an option. This is useful for cases where a variant should not apply.

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


const button = cva({
  base: "button",
  variants: {
    intent: {
      unset: null,
      primary: "button--primary",
      secondary: "button--secondary",
    },
  },
});


button({ intent: "unset" });
// => "button"
```

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

### Compose Multiple cva Components

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

Use the `compose` method to merge multiple cva component definitions. This is useful for creating components that inherit variants and base styles from different sources. Ensure all necessary imports are included.

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


const box = cva({
  base: "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,
  },
});


const root = cva({
  base: "card rounded border-solid border-slate-300",
  variants: {
    shadow: {
      md: "drop-shadow-md",
      lg: "drop-shadow-lg",
      xl: "drop-shadow-xl",
    },
  },
});


export interface CardProps extends VariantProps<typeof card> {}
export const card = compose(box, root);


card({ margin: 2, shadow: "md" });
// => "box box-border m-2 card border-solid border-slate-300 rounded drop-shadow-md"
card({ margin: 2, shadow: "md", class: "adhoc-class" });
// => "box box-border m-2 card border-solid border-slate-300 rounded drop-shadow-md adhoc-class"
```

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

### CSS Modules for Button Styles

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

Defines the styles for the Button component using CSS Modules. This includes base styling, variants for intent (primary, secondary), size (small, medium), disabled states, and specific compound variant styles.

```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;
}
```

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

### CSS Module with Composed Styles

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

Define base styles and type-specific styles in a CSS Module. The `clsx` utility is used to conditionally apply classes.

```css
.alert {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
}

.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
```

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

### Svelte Package Dependencies

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

This snippet shows the dependencies for Svelte within a package.json file. It includes various development-related packages required for Svelte projects.

```json
{ "svelte": { "version": "5.56.2", "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.56.2.tgz", "integrity": "sha512-1lDf8TLqpxyAt3xgybfytWPJQbaUD6TiDgpiCLH0BKrKEwzecB9pjuNVnEJMpzH018xUzo6oxheK2HT0oa2RoQ==", "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" } } }
```

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

### TypeScript Configuration for Vue Project

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

Configures the TypeScript compiler for the Vue project, specifying module resolution, strict type checking, JSX support, and library inclusions. It also includes references for node-specific TypeScript configurations.

```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" }]
}

```

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

### Vite Environment Declaration

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

This TypeScript declaration file provides type information for Vite environments, ensuring type safety during development.

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

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

### Define Base Styles with cva

Source: https://beta.cva.style/getting-started/whats-new

Use the `cva` function to define base styles for a component. The base styles are applied via the named `base` property.

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


const component = cva({ base: "your-base-class" });
```

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

### Define Button Component with CVA and Tailwind CSS

Source: https://beta.cva.style/examples/react/tailwindcss

This snippet shows the definition of a React Button component using the `cva` utility. It includes base styles and variants for 'intent' (primary, secondary) and 'size' (small, medium), all styled with Tailwind CSS classes.

```typescript
import React from
"react";
import { cva, type
VariantProps }
from "cva";

const button = cva(
{
base: "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"]
}
}
});

export interface ButtonProps extends Omit, "disabled">, VariantProps {} 

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