# Bouncy Accordion

> Accordion with a playful spring bounce — the open row detaches from its neighbors with animated corner radii and a gap that springs apart.

<demo-bouncy-accordion>



</demo-bouncy-accordion>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/bouncy-accordion.json"
```

## Usage

```vue
<script setup lang="ts">
  import { ref } from 'vue';
  import BouncyAccordion from '~/components/ui/bouncy-accordion/BouncyAccordion.vue';

  const active = ref<string | null>(null);

  const items = [
    {
      id: 'shipping',
      title: 'How fast is shipping?',
      description: 'Orders placed before noon ship the same day.',
      icon: 'lucide:truck',
    },
    {
      id: 'returns',
      title: 'What is the return policy?',
      description: 'Everything can come back within 30 days.',
      icon: 'lucide:rotate-ccw',
    },
  ];
</script>

<template>
  <BouncyAccordion v-model="active" :items="items" />
</template>
```

Rows sit flush in a single card. Opening one springs it apart from its
neighbors — the gap bounces open, corner radii animate so each connected
group stays visually sealed, and the description spring-expands while the
chevron flips. Respects `prefers-reduced-motion`.

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        items
      </code>
    </td>
    
    <td>
      <code>
        BouncyAccordionItem[]
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Rows (<code>
        id
      </code>
      
      , <code>
        title
      </code>
      
      , <code>
        description?
      </code>
      
      , <code>
        icon?
      </code>
      
      , <code>
        disabled?
      </code>
      
      )
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        collapsible
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Clicking the open row closes it
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes on the root
    </td>
  </tr>
</tbody>
</table>

## v-model

<table>
<thead>
  <tr>
    <th>
      Model
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        modelValue
      </code>
    </td>
    
    <td>
      <code>
        string | null
      </code>
    </td>
    
    <td>
      Open row id (<code>
        null
      </code>
      
       = all closed)
    </td>
  </tr>
</tbody>
</table>

## Credits

- Ported from [componentry.fun](https://www.componentry.dev/docs/components/bouncy-accordion)