🎉 cva@1.0 is now in beta. Read more →
CVA (Class Variance Authority)DocumentationDocumentationSponsorsSponsors (opens in a new tab)
GitHubGitHub (opens in a new tab) (opens in a new tab)
  • Introduction
  • Getting Started
    • Installation
    • Variants
    • Compound Components
    • TypeScript
    • Extending Components
    • Mixing Components
    • Polymorphism
    • Composing Components
  • API Reference
  • Examples
    • 11ty
    • Astro
    • BEM
    • React
      • CSS Modules
      • Tailwind CSS
    • Svelte
    • Vue
    • Other Use Cases
  • Tutorials
  • FAQs
  • Documentation
    • Introduction
    • Getting Started
      • Installation
      • Variants
      • Compound Components
        • Examples
      • TypeScript
      • Extending Components
      • Mixing Components
      • Polymorphism
      • Composing Components
    • API Reference
    • Examples
      • 11ty
      • Astro
      • BEM
      • React
        • CSS Modules
        • Tailwind CSS
      • Svelte
      • Vue
      • Other Use Cases
    • Tutorials
    • FAQs
  • Sponsors (opens in a new tab)

On This Page

  • Examples
Question? Give us feedback → (opens in a new tab)Edit this page
Documentation
Getting Started
Compound Components

Compound Components

Compound Components are a term that React.js developers will be familiar with, and feels like the best way to describe this pattern.

Build compound components with the power of CSS selectors and variables – no additional JS required.

TODO

  1. Tab with NormalCSS
  2. Tab with TailwindCss

Examples

  • React with Tailwind CSS
VariantsTypeScript

Apache-2.0 2024 © Joe Bell