Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | AccordionItem[] | [{id: '1', label: '...', content: '...'}, ...] | Array of accordion items with id, label, and optional content. |
| containerBgColor | string | #ffffff | Background color of the container card. |
| itemBgColor | string | #f4f4f5 | Background color of each accordion row. |
| itemTextColor | string | #18181b | Text color of item labels. |
| contentTextColor | string | #71717a | Text color of expanded content. |
| defaultActive | number | null | 0 | Index of the initially active item (null for none). |
When to Use
Use for FAQ sections, feature lists, or any collapsible content block where a soft, organic feel fits the brand. Pairs well with white or light-gray backgrounds.
Best Practices
Keep labels short and scannable — under 8 words. The spring physics feel most natural at 3–6 items. For longer lists, consider AccordionFAQBold which handles density better.
Why This Component Matters
Spring-driven height animation makes content feel like it has physical weight. The difference between a CSS transition and a spring is immediately felt — one slides, one breathes.
FAQ
QHow do I change the spring feel?
Adjust stiffness and damping in the AnimatePresence transition. Higher stiffness = snappier, lower damping = more bounce.
QCan I use React nodes as content?
Yes — the content prop accepts React.ReactNode, so you can pass any JSX including buttons, links, and images.
QIs it mobile responsive?
Yes — the max-w-md container scales down naturally. The spring animation performs at 60fps on modern mobile devices.
Related Components
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.
FAQ Dark
Dark-themed card FAQ with accent-colored border glow on the active item and a 'View more' inline link.