# Bouncy Accordion

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

Source: https://www.honestui.com/docs/animated/bouncy-accordion

```tsx
import { Bell, CreditCard, ShieldCheck } from "honestui/icons";

import { BouncyAccordion } from "@/registry/default/animated/bouncy-accordion";

const items = [
  {
    id: "payment",
    title: "Payment method",
    description: "Change the card used for your team plan and future renewals.",
    icon: <CreditCard className="size-4" />,
  },
  {
    id: "security",
    title: "Security checks",
    description: "Review sign-in devices, backup codes, and account recovery.",
    icon: <ShieldCheck className="size-4" />,
  },
  {
    id: "email-updates",
    title: "Email updates",
    description: "Choose which team activity and weekly summaries you receive.",
    icon: <Bell className="size-4" />,
  },
];

export function BouncyAccordionDemo() {
  return (
    <BouncyAccordion
      items={items}
      defaultValue="payment"
      className="w-full max-w-md p-6"
      classNames={{ item: "border border-border" }}
    />
  );
}

```

## Overview [#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 [#installation]

<CliBlock commands="[&#x22;bouncy-accordion&#x22;]" />

## Usage [#usage]

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

<BouncyAccordion items={items} defaultValue="payment" />
```

## Accessibility [#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 [#api-reference]


  ### `items`

type: `BouncyAccordionItem[]`

Rows with 

    `id`

    , 

    `title`

    , optional 

    `description`

    , 

    `icon`

    , and 

    `disabled`

    .

  ### `value`

type: `string | null`

Controlled open row.

  ### `defaultValue`

type: `string | null` · default: `null`

Initially open row.

  ### `onValueChange`



void">
    Runs when the open row changes.

  ### `collapsible`

type: `boolean` · default: `true`

Lets the open row close without opening another.

  ### `classNames`

type: `BouncyAccordionClassNames`

Classes for the root, item, trigger, icon, title, chevron, content, and description slots.