diff --git a/00_Raw/2026-04-24/Accordion.md b/00_Raw/2026-04-24/Accordion.md new file mode 100644 index 00000000..9d43fc37 --- /dev/null +++ b/00_Raw/2026-04-24/Accordion.md @@ -0,0 +1,167 @@ +--- +title: Accordion +description: A vertically stacked set of interactive headings that each reveal a section of content. +base: radix +component: true +links: + doc: https://www.radix-ui.com/primitives/docs/components/accordion + api: https://www.radix-ui.com/primitives/docs/components/accordion#api-reference +--- + + + +## Installation + + + + + Command + Manual + + + + +```bash +npx shadcn@latest add accordion +``` + + + + + + + +Install the following dependencies: + +```bash +npm install radix-ui +``` + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Usage + +```tsx showLineNumbers +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion" +``` + +```tsx showLineNumbers + + + Is it accessible? + + Yes. It adheres to the WAI-ARIA design pattern. + + + +``` + +## Composition + +Use the following composition to build an `Accordion`: + +```text +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](/docs/rtl). + + + +## API Reference + +See the [Radix UI](https://www.radix-ui.com/primitives/docs/components/accordion#api-reference) documentation for more information.