---
title: "Compound Components"
description: "Build compound component sets, such as Accordion.Item, with cva and CSS."
url: "https://cva.style/beta/getting-started/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 />`

```tsx
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 CSS: leverage the cascade, custom properties, `:has()` selectors, and more…

## Examples

* [React with Tailwind CSS (Compound Components)](https://cva.style/beta/examples/react/tailwindcss#compound-components)