Docs·Bouncy Accordion

Bouncy Accordion

Spring-grouped FAQ rows with controlled state, optional icons, disabled items, and customizable slots.

Installation

$pnpm dlx shadcn@latest add @spiderui/bouncy-accordion

Usage

API Reference

PropTypeDefault
itemsRows with id, title, description, icon, and disabled state.
BouncyAccordionItem[]—
valueControlled id of the open row.
string | null—
defaultValueInitially open row for uncontrolled usage.
string | nullnull
onValueChangeRuns when the open row changes.
(value: string | null) => void—
collapsibleAllows the active row to close.
booleantrue
classNamesClasses for each visual slot.
BouncyAccordionClassNames—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
The rows use spring-based layout transitions, so the open item separates naturally while its neighbors reshape around it.
Yes. The classNames prop exposes the root, item, trigger, icon, title, chevron, content, and description slots.
Use value and onValueChange for controlled state, or defaultValue for local state.
import { BouncyAccordion } from "@/components/ui/bouncy-accordion"
const items = [
  {
    id: "shipping",
    title: "How quickly can I ship?",
    description: "Copy the component, add your content, and customize its slots.",
  },
  {
    id: "controlled",
    title: "Can I control the open row?",
    description: "Yes. Pass value and onValueChange.",
  },
]

export function Demo() {
  return <BouncyAccordion items={items} defaultValue="shipping" />
}