# Accordion: Nested

> An inner accordion keeps its own variant, focus styles and arrow-key navigation.

Example: https://hextaui.com/docs/accordion/examples/nested
Component docs: https://hextaui.com/docs/accordion.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/accordion-nested.json
```

This adds `components/examples/accordion/nested.tsx` with the Accordion component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/accordion/nested.tsx"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const items = [
  {
    value: "what",
    question: "What is HextaUI?",
    answer:
      "A collection of components built on top of shadcn/ui, with careful attention to structure and micro-interactions.",
  },
  {
    value: "install",
    question: "How do I install a component?",
    answer:
      "Copy the source into your project, then edit it like any other file you own.",
  },
  {
    value: "license",
    question: "Can I use it in commercial projects?",
    answer:
      "Yes. Every component is free and open source, for personal and commercial work.",
  },
]

export function AccordionNested() {
  return (
    <Accordion variant="separated" className="w-full max-w-md">
      <AccordionItem value="billing">
        <AccordionTrigger>Billing</AccordionTrigger>
        <AccordionContent>
          <Accordion variant="ghost">
            {items.map((item) => (
              <AccordionItem key={item.value} value={item.value}>
                <AccordionTrigger>{item.question}</AccordionTrigger>
                <AccordionContent>{item.answer}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="shipping">
        <AccordionTrigger>Shipping</AccordionTrigger>
        <AccordionContent>Ships within 2 business days.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```

## Props in this example

### Accordion

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "outline" \| "separated" \| "ghost"` | `"default"` |  |

### AccordionItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – | Generated automatically when omitted. |

## More Accordion examples

- [Outline](https://hextaui.com/docs/accordion/examples/outline.md)
- [Separated](https://hextaui.com/docs/accordion/examples/separated.md)
- [Ghost](https://hextaui.com/docs/accordion/examples/ghost.md)
- [Multiple](https://hextaui.com/docs/accordion/examples/multiple.md)
- [Disabled](https://hextaui.com/docs/accordion/examples/disabled.md)
- [Controlled](https://hextaui.com/docs/accordion/examples/controlled.md)
- [Custom icon](https://hextaui.com/docs/accordion/examples/custom-icon.md)
- [Leading icons](https://hextaui.com/docs/accordion/examples/leading-icons.md)
- [Long content](https://hextaui.com/docs/accordion/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/accordion/examples/rtl.md)