||

Bouncy Accordion

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

A connected accordion whose rows separate and settle around expanded content.

bouncy-accordion-demo

Overview

Use Bouncy Accordion for a short list of mutually exclusive details. Opening a row separates it from its neighbors and reveals its content with coordinated layout motion.

Installation
npx honestui@latest add bouncy-accordion

Usage

 
import { BouncyAccordion } from "@/components/animated/bouncy-accordion"

<BouncyAccordion items={items} defaultValue="billing" />

Accessibility

Each row uses a button with aria-expanded and aria-controls; the panel is a labeled region. Disabled rows stay out of the interaction path, and reduced motion removes spring movement.

API Reference
PropTypeDefaultDescription
items*BouncyAccordionItem[]–Rows with id, title, optional description, icon, and disabled.
valuestring | null–Controlled open row.
defaultValuestring | nullnullInitially open row.
onValueChange(value: string | null) => void–Runs when the open row changes.
collapsiblebooleantrueLets the open row close without opening another.
classNamesBouncyAccordionClassNames–Classes for the root, item, trigger, icon, title, chevron, content, and description slots.