# Squares

> Animated grid of squares with directional movement and hover interaction.

<demo-squares>



</demo-squares>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import Squares from '~/components/ui/squares/Squares.vue';
</script>

<template>
  <div class="relative h-100 w-full overflow-hidden rounded-lg">
    <Squares
      :speed="0.5"
      direction="diagonal"
      border-color="#333"
      hover-fill-color="#222"
      :square-size="40"
    />
  </div>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        direction
      </code>
    </td>
    
    <td>
      <code>
        'left' | 'right' | 'up' | 'down' | 'diagonal'
      </code>
    </td>
    
    <td>
      <code>
        'right'
      </code>
    </td>
    
    <td>
      Direction of grid movement
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Animation speed
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#999'
      </code>
    </td>
    
    <td>
      Border color of squares
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        square-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        40
      </code>
    </td>
    
    <td>
      Size of each square in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hover-fill-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#222'
      </code>
    </td>
    
    <td>
      Fill color on hover
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>