Bouncy Accordion
Spring accordion that splits rounded rows when a panel opens.
4.6 KB
•Updated on September 4, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-bouncy-accordionUsage
Code
import { BouncyAccordion } from '@/components/spaceui/bouncy-accordion'
export default function SpaceUI() {
return (
<BouncyAccordion
items={[
{ title: 'Families', description: 'Pick a variant.' },
{ title: 'Capabilities', description: 'Inspect supported effects.' },
]}
/>
)
}API Reference
BouncyAccordion
| Prop | Type | Default | Description |
|---|---|---|---|
items | BouncyAccordionItem[] | — | Rows to render |
defaultValue | number|null | 0 | Initially open index |
value | number|null | — | Controlled open index |
onValueChange | (index: number|null) | — | Fired when a row opens |
className | string | — | Root class |
BouncyAccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | Optional leading |
title | string | — | Trigger label |
description | ReactNode | — | Open panel body |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.