Detachable Accordion
An interactive accordion with spring motion where the expanded item physically detaches with animated gaps and rounded corners.
4.2 KB
•Updated on September 25, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-detachable-accordionUsage
Code
import { DetachableAccordion } from '@/components/spaceui/detachable-accordion'Code
<DetachableAccordion defaultValue="favorites" detachGap={16} cornerRadius={24} />API Reference
DetachableAccordion Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | DetachableAccordionItem[] | DEFAULT_ITEMS | List of items containing value, title, content, and optional icon |
value | string | - | Controlled expanded item value |
defaultValue | string | Initial expanded item value | |
onValueChange | (value: string|undefined) => void | - | Callback triggered when the expanded item changes |
detachGap | number | 16 | Spacing in pixels created above and below the active item |
cornerRadius | number | 24 | Border radius in pixels applied to the active item and neighboring edges |
spring | Transition | mass: 10, stiffness: 900, damping: 80 | Motion spring configuration for detachment and icon rotation |
className | string | - | Additional class name applied to outer container |
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.