Bouncy Accordion
.mdSingle-open accordion whose panels open on a weighted height spring while the body rises out of a blur and the plus turns into a cross.
accordionfaqdisclosurecollapsespring
Installation
$npx shadcn@latest add @geturui/accordion
Usage
usage.tsx
1import { Accordion } from "@/components/ui/accordion";
2
3const faq = [
4 { q: "Do you offer refunds?", a: "Yes, within 14 days of purchase, no questions asked." },
5 { q: "Can I use it in client work?", a: "Yes, in unlimited personal and client projects." },
6];
7
8export function Faq() {
9 return <Accordion items={faq} defaultOpen={0} />;
10}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | { q: ReactNode; a: ReactNode; icon?: ReactNode }[] | — | Questions and answers in order. |
defaultOpen | number | -1 | Index open on mount when uncontrolled; -1 for none. |
value | number | — | Open index when controlled; -1 for none. |
onValueChange | (index: number) => void | — | Called with the new open index (-1 when closed). |
className | string | — | Classes for the list. |
Accessibility
- Each header is a real <button> with aria-expanded and aria-controls pointing at its panel.
- Open panels are role="region" labelled by their header.
- The plus/cross glyph is decorative and hidden from assistive tech.