Skip to content
cva@beta

Compound Components

For larger, more complex components, you may end up wanting to create a set of composable components that work together: “Compound Components”

e.g. <Accordion.Subcomponent /> instead of <Accordion />
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>
  );
}

cva encourages you to build these compound components with the power of CSS; leverage the cascade, custom properties, :has() selectors, and more…

Examples