# Accordion: Right to left

> Content, icons and the open motion follow the reading direction.

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

## Add this example

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

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

## Source

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

const items = [
  {
    value: "what",
    question: "ما هي HextaUI؟",
    answer: "مجموعة مكونات مبنية على shadcn/ui مع اهتمام بالتفاصيل والحركة.",
  },
  {
    value: "install",
    question: "كيف أثبّت مكوّنًا؟",
    answer: "انسخ الشيفرة إلى مشروعك وعدّلها كأي ملف تملكه.",
  },
  {
    value: "license",
    question: "هل يمكنني استخدامها في مشاريع تجارية؟",
    answer: "نعم، جميع المكونات مجانية ومفتوحة المصدر.",
  },
]

export function AccordionRtl() {
  return (
    <div dir="rtl" className="w-full max-w-md">
      <Accordion variant="outline" defaultValue={["what"]}>
        {items.map((item) => (
          <AccordionItem key={item.value} value={item.value}>
            <AccordionTrigger>{item.question}</AccordionTrigger>
            <AccordionContent>{item.answer}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}
```

## Props in this example

### Accordion

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "outline" \| "separated" \| "ghost"` | `"default"` |  |
| `defaultValue` | `Value[]` | – |  |

### 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)
- [Nested](https://hextaui.com/docs/accordion/examples/nested.md)