Antigravity Agent
3.5 KiB
3.5 KiB
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 |
|
Installation
Command Manualnpx 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.