Accordion
FREEExpandable sections in line, card and ghost styles with icons, descriptions and a smooth height animation.
Installation
Terminal
npx @bloxa/cli add accordion
# or: npx shadcn@latest add @bloxa/accordionPackages installed automatically: radix-ui
Examples
FAQ
Yes. Arrow keys move between headers, Enter and Space toggle, and screen readers hear the expanded state.
Use type="multiple". With type="single" and collapsible, one item opens at a time and can be closed.
Height and opacity animate without measuring the content, and motion is skipped for reduced-motion users.
Cards, icons, multiple open
Update how you appear to your team.
Turn on two-factor authentication to protect your account.
You are on the Pro plan, paid once for life.
API reference
Every component also accepts the props of the element it renders.
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | — | One or many open items. |
| collapsible | boolean | false | In single mode, the open item can be closed. |
| variant | "line" | "card" | "ghost" | "line" | Look. |
AccordionTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | — | Icon before the title. |
| description | ReactNode | — | Second line under the title. |
| indicator | "chevron" | "plus" | "chevron" | Indicator on the right. |