# Accordion

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```
  </div>
  <div slot="react">
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";

export function Example() {
  return (
    <Accordion defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger>What is Astro?</AccordionTrigger>
        <AccordionContent>
          Astro is an web framework for building fast, scalable, and secure websites.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
        <AccordionContent>
          Astro provides a set of features that make it an ideal choice for building fast,
          scalable, and secure websites.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
        <AccordionContent>
          To get started with Astro, follow the instructions in the documentation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/starwind/accordion";
</script>

<template>
  <Accordion defaultValue="item-1">
    <AccordionItem value="item-1">
      <AccordionTrigger>What is Astro?</AccordionTrigger>
      <AccordionContent>
        Astro is an web framework for building fast, scalable, and secure websites.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
      <AccordionContent>
        Astro provides a set of features that make it an ideal choice for building fast, scalable,
        and secure websites.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-3">
      <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
      <AccordionContent>
        To get started with Astro, follow the instructions in the documentation.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add accordion --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add accordion --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add accordion --framework vue
```
</DocsTabsContent>
</DocsTabs>

## Usage

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```
  </div>
  <div slot="react">
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";

export function Example() {
  return (
    <Accordion defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger>What is Astro?</AccordionTrigger>
        <AccordionContent>
          Astro is an web framework for building fast, scalable, and secure websites.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
        <AccordionContent>
          Astro provides a set of features that make it an ideal choice for building fast,
          scalable, and secure websites.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
        <AccordionContent>
          To get started with Astro, follow the instructions in the documentation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/starwind/accordion";
</script>

<template>
  <Accordion defaultValue="item-1">
    <AccordionItem value="item-1">
      <AccordionTrigger>What is Astro?</AccordionTrigger>
      <AccordionContent>
        Astro is an web framework for building fast, scalable, and secure websites.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
      <AccordionContent>
        Astro provides a set of features that make it an ideal choice for building fast, scalable,
        and secure websites.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-3">
      <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
      <AccordionContent>
        To get started with Astro, follow the instructions in the documentation.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Composition

Use this structure for an accordion with one or more items:

```text
Accordion
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent
```

## Multiple Items

Use `type="multiple"` to allow multiple accordion items to be open at the same time.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion type="multiple" defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```
  </div>
  <div slot="react">
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";

export function Example() {
  return (
    <>
      <Accordion type="multiple" defaultValue={["item-1"]}>
        <AccordionItem value="item-1">
          <AccordionTrigger>What is Astro?</AccordionTrigger>
          <AccordionContent>
            Astro is an web framework for building fast, scalable, and secure websites.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
          <AccordionContent>
            Astro provides a set of features that make it an ideal choice for building fast,
            scalable, and secure websites.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
          <AccordionContent>
            To get started with Astro, follow the instructions in the documentation.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/starwind/accordion";
</script>

<template>
  <Accordion type="multiple" :defaultValue="['item-1']">
    <AccordionItem value="item-1">
      <AccordionTrigger>What is Astro?</AccordionTrigger>
      <AccordionContent>
        Astro is an web framework for building fast, scalable, and secure websites.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
      <AccordionContent>
        Astro provides a set of features that make it an ideal choice for building fast, scalable,
        and secure websites.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-3">
      <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
      <AccordionContent>
        To get started with Astro, follow the instructions in the documentation.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Open by Default

Use the `defaultValue` prop to set the default open item. If the prop is not provided, no items will be open by default.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion defaultValue="item-3">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```
  </div>
  <div slot="react">
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";

export function Example() {
  return (
    <>
      <Accordion defaultValue="item-3">
        <AccordionItem value="item-1">
          <AccordionTrigger>What is Astro?</AccordionTrigger>
          <AccordionContent>
            Astro is an web framework for building fast, scalable, and secure websites.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
          <AccordionContent>
            Astro provides a set of features that make it an ideal choice for building fast,
            scalable, and secure websites.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
          <AccordionContent>
            To get started with Astro, follow the instructions in the documentation.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/starwind/accordion";
</script>

<template>
  <Accordion defaultValue="item-3">
    <AccordionItem value="item-1">
      <AccordionTrigger>What is Astro?</AccordionTrigger>
      <AccordionContent>
        Astro is an web framework for building fast, scalable, and secure websites.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
      <AccordionContent>
        Astro provides a set of features that make it an ideal choice for building fast, scalable,
        and secure websites.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-3">
      <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
      <AccordionContent>
        To get started with Astro, follow the instructions in the documentation.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## API Reference
### Accordion
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `defaultValue` | `string \| string[]` | No | - | Primitive override | Sets the initial value when the component is uncontrolled. |
- Inherits div attributes.

### AccordionItem
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `value` | `string` | Yes | - | Wrapper prop | Controls or identifies the component value. |
- Inherits div attributes.

### AccordionTrigger
- Inherits button attributes.

### AccordionContent
- Inherits div attributes.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Accordion Primitive](/docs/primitives/accordion/)
- Runtime factory: [`createAccordion`](/docs/runtime/#create-accordion) from `@starwind-ui/runtime/accordion`

## Changelog

### v2.0.3

- Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

### v2.0.2

- Applied divider borders only to non-last Accordion items in the generated Astro and React components.

### v2.0.1

- Single accordions now default to collapsible.

### v2.0.0

- Rebuilt Accordion on Starwind Runtime for disclosure state and keyboard behavior;
- See the [Accordion Primitive](/docs/primitives/accordion/) for the underlying unstyled anatomy and behavior API.

### v1.3.5

- Refactor tailwind variants functions into separate `variants.ts` file

### v1.3.3

- Add `starwind:init` event listener to enable initialization of additional Accordions loaded after an initial page load, such as when using server islands
- Update the opening animation so that it does not play on initial accordion load

### v1.3.2

- add named slot "icon" to `AccordionTrigger` to enable easy icon swapping

### v1.3.1

- simplified default styling to enable easier custom styling

### v1.3.0

- style and focus state updates

### v1.2.0

- Add a `data-slot` attribute to all components to enable global styling updates

### v1.1.0

- `tailwind-variants` now implemented. This uses `tailwind-merge` under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the `class` prop.