2nd/10_Wiki/Development/UI_Components/Accordion.md

title, description, base, component, links

title	description	base	component	links
Accordion	A vertically stacked set of interactive headings that each reveal a section of content.	radix	true	doc api https://www.radix-ui.com/primitives/docs/components/accordion https://www.radix-ui.com/primitives/docs/components/accordion#api-reference

Installation

Command Manual

npx shadcn@latest add accordion

Install the following dependencies:

npm install radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

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

<Accordion type="single" collapsible 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>

Composition

Use the following composition to build an Accordion:

Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

Examples

Basic

A basic accordion that shows one item at a time. The first item is open by default.

Multiple

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

Disabled

Use the disabled prop on AccordionItem to disable individual items.

Borders

Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.

Card

Wrap the Accordion in a Card component.

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

API Reference

See the Radix UI documentation for more information.