# Magnetic Dock

> A macOS-style dock with magnetic hover magnification and genie effect.

<demo-magnetic-dock>



</demo-magnetic-dock>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import MagneticDock from '~/components/ui/magnetic-dock/MagneticDock.vue';
  import type { MagneticDockItemData } from '~/types/components';

  const items: MagneticDockItemData[] = [
    { icon: 'lucide:home', label: 'Home', isActive: true },
    { icon: 'lucide:search', label: 'Search' },
    { icon: 'lucide:folder', label: 'Finder' },
    { icon: 'lucide:mail', label: 'Mail', badge: 3 },
    { icon: 'lucide:music', label: 'Music' },
    { icon: 'lucide:settings', label: 'Settings' },
    { icon: 'lucide:trash', label: 'Trash' },
  ];
</script>

<template>
  <MagneticDock :items="items" />
</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>
        DockItem[]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      Array of dock items with icon and label
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        magnification
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Magnification factor on hover
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        distance
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        150
      </code>
    </td>
    
    <td>
      Distance for magnetic effect in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes for styling
    </td>
  </tr>
</tbody>
</table>