3

Accordion

A vertically stacked set of interactive headings that each reveal a section of content. Built on Base UI's accordion primitive.

Last updated August 8, 2026

CreditsModifiedPublished

Copied from shadcn/ui.

  • Trigger uses text-start and a single chevron that rotates 180° via aria-expanded, instead of two swapped icons — reads correctly in both LTR and RTL without an icon-mirroring rule

Overview

Yes. It adheres to the WAI-ARIA design pattern.

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
 
const faq = [
  {
    value: "item-1",
    question: "Is it accessible?",
    answer: "Yes. It adheres to the WAI-ARIA design pattern.",
  },
  {
    value: "item-2",
    question: "Is it styled?",
    answer:
      "Yes. It comes with default styles that match the rest of the library.",
  },
  {
    value: "item-3",
    question: "Is it animated?",
    answer:
      "Yes. It's animated by default, but you can disable it if you prefer.",
  },
]
 
export function AccordionDemoExample() {
  return (
    <Accordion defaultValue={["item-1"]} className="w-full max-w-sm">
      {faq.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionTrigger>{item.question}</AccordionTrigger>
          <AccordionContent>{item.answer}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/accordion.json

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
 
export function Example() {
  return (
    <Accordion defaultValue={["item-1"]}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

RTL

بله، برای استفاده شخصی و تجاری کاملاً رایگان است.

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
 
const faq = [
  {
    value: "item-1",
    question: "آیا این کتابخانه رایگان است؟",
    answer: "بله، برای استفاده شخصی و تجاری کاملاً رایگان است.",
  },
  {
    value: "item-2",
    question: "آیا از راست‌به‌چپ پشتیبانی می‌کند؟",
    answer: "بله، تمام کامپوننت‌ها به‌صورت پیش‌فرض راست‌به‌چپ هستند.",
  },
  {
    value: "item-3",
    question: "آیا می‌توانم چند مورد را هم‌زمان باز کنم؟",
    answer:
      "بله، با استفاده از ویژگی multiple می‌توانید چند مورد را باز نگه دارید.",
  },
]
 
export function AccordionRtlExample() {
  return (
    <Accordion defaultValue={["item-1"]} className="w-full max-w-sm">
      {faq.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionTrigger>{item.question}</AccordionTrigger>
          <AccordionContent>{item.answer}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

API Reference

Accordion

AccordionItem

Edit this page on GitHub
PreviousThemingNextAlert Dialog