║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Accordion description: This collapsible component let's your users read only the content they care about. 😌 lastUpdated: 19 Oct, 2024 links: api_reference: https://www.radix-ui.com/primitives/docs/components/accordion#api-reference source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Accordion.tsx

<ComponentShowcase name="accordion-style-default" /> <br /> <br />

Installation

<ComponentInstall> <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/accordion" /> <ComponentInstall.Manual> #### 1. Install dependencies:

npm install @radix-ui/react-accordion lucide-react

<br />

2. Copy the code 👇 into your project:

<ComponentSource name="accordion" />

</ComponentInstall.Manual> </ComponentInstall>

<br /> <br />

Examples

Default

<ComponentShowcase name="accordion-style-default" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║