# Accordion

Accessible single or multiple disclosures with fluid hover.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).







## Preview [#preview]

### Single panel [#single-panel]

<ComponentPreview src="examples/components/accordion.tsx">
  <AccordionDemo />
</ComponentPreview>

### Multiple panels and compact size [#multiple-panels-and-compact-size]

<ComponentPreview src="examples/components/accordion-multiple.tsx">
  <AccordionMultipleDemo />
</ComponentPreview>

## Installation [#installation]

<CodeBlockCommand __npm__="`npx shadcn@latest add ${SITE.URL}/r/accordion.json`" __pnpm__="`pnpm dlx shadcn@latest add ${SITE.URL}/r/accordion.json`" __yarn__="`yarn dlx shadcn@latest add ${SITE.URL}/r/accordion.json`" __bun__="`bunx shadcn@latest add ${SITE.URL}/r/accordion.json`" />

## Usage [#usage]

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";

<Accordion multiple defaultValue={["about"]}>
  <AccordionItem value="about">
    <AccordionTrigger>About</AccordionTrigger>
    <AccordionContent>Details about this project.</AccordionContent>
  </AccordionItem>
</Accordion>;
```

## API Reference [#api-reference]

Root accepts Base UI Accordion props including `multiple`, `value`, `defaultValue`, `onValueChange` and `disabled`. Values are arrays, including single-panel mode. Items accept `value` and `disabled`. Trigger density follows SizeProvider; height animation respects reduced motion. Use arrow keys, Home/End, Enter and Space.