Docs·Bouncy Accordion

Bouncy Accordion

An interactive, animated accordion component with playful physics, perfect for adding energy to navigation and details sections.

Installation

pnpm dlx shadcn@latest add @componentry/bouncy-accordion

Usage

API Reference

PropertyTypeDefault
items

Array of accordion items containing id, title, description, and optional icon.

BouncyAccordionItem[]—
value

The controlled value of the active item.

string | null—
defaultValue

The initial active item when uncontrolled.

string | nullnull
collapsible

Whether the active item can be closed by clicking it again.

booleantrue

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

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

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
Update your personal information, avatar, and preferred language settings.
Manage your password, two-factor authentication, and connected devices.
Choose which product updates and activity alerts you want to receive.
View past invoices, update payment methods, and change your subscription.
Connect your favorite tools, configure webhooks, and automate workflows.
Configure developer API keys, export account data, and danger zone actions.
import { BouncyAccordion } from "@/components/ui/bouncy-accordion"
import { Bell, Shield } from "lucide-react"
const items = [
  {
    id: "security",
    title: "Security & Privacy",
    description: "Manage your password, two-factor authentication, and connected devices.",
    icon: <Shield className="h-4 w-4" />,
  },
  {
    id: "notifications",
    title: "Push Notifications",
    description: "Choose which product updates and activity alerts you want to receive.",
    icon: <Bell className="h-4 w-4" />,
  }
];

export default function App() {
  return <BouncyAccordion items={items} defaultValue="notifications" />
}