# Orbit Card Stack

> A stacked deck of profile cards that fans out into an orbital arc on hover, lifting the active card with spring physics.

<demo-orbit-card-stack>



</demo-orbit-card-stack>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/orbit-card-stack.json"
```

## Usage

```vue
<script setup lang="ts">
  import OrbitCardStack from '~/components/ui/orbit-card-stack/OrbitCardStack.vue';
</script>

<template>
  <OrbitCardStack />
</template>
```

## 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>
        OrbitStackItem[]
      </code>
    </td>
    
    <td>
      default
    </td>
    
    <td>
      Array of profile items (name, role, description, etc.)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        default-active-index
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Index of the card highlighted when collapsed
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spread
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        168
      </code>
    </td>
    
    <td>
      Horizontal spacing between cards when expanded, in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        lift
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        34
      </code>
    </td>
    
    <td>
      Vertical lift of the active card when expanded, in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes for the root wrapper
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        card-class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes for each card
    </td>
  </tr>
</tbody>
</table>

## Events

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Payload
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        activeChange
      </code>
    </td>
    
    <td>
      <code>
        (item: OrbitStackItem, index: number)
      </code>
    </td>
    
    <td>
      Emitted when the active card changes
    </td>
  </tr>
</tbody>
</table>