Accordion
Free
Sections that open with an animated height, one at a time or several together.
Billing questions
Yes. Upgrades apply right away and are prorated; downgrades take effect at the end of your billing period.
Customize
Type
Open first
Collapsible
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/accordion.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/accordion.tsx.
Usage
import { Accordion } from "@/components/ui/accordion";
<Accordion
type="single"
defaultOpen="refunds"
items={[
{ id: "plans", title: "Can I change plans later?", content: "Yes, at any time." },
{ id: "refunds", title: "Do you offer refunds?", content: "Within 14 days." },
]}
/>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { id, title, content, disabled? }[] | — | Sections in order. |
| type | "single" | "multiple" | "single" | One open section at a time, or any number. |
| defaultOpen | string | string[] | — | Section ids open on first render, when uncontrolled. |
| value | string[] | — | Open section ids, for controlled use. |
| onValueChange | (open: string[]) => void | — | Called with the open section ids after each toggle. |
| collapsible | boolean | true | In single mode, whether the open section can be closed again. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion