# Sticky Scroll Cards

> Scroll-driven card stack where images pin and scale as you scroll.

<demo-sticky-scroll-cards>



</demo-sticky-scroll-cards>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/sticky-scroll-cards.json"
```

## Usage

```vue
<script setup lang="ts">
  import StickyScrollCards from '~/components/ui/sticky-scroll-cards/StickyScrollCards.vue';
</script>

<template>
  <!-- Wrap in a tall scroll container so the sticky stack pins as you scroll -->
  <div class="h-screen overflow-y-auto">
    <StickyScrollCards />
  </div>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        cards
      </code>
    </td>
    
    <td>
      <code>
        StickyScrollCardItem[]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      Array of card objects with title and src
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hint
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Hint label shown above card stack
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>

### StickyScrollCardItem

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

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Card title
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        src
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Image URL
    </td>
  </tr>
</tbody>
</table>