# Border Beam

> A moving gradient beam that travels along the border of its container. Perfect for highlighting active states.

<demo-border-beam>



</demo-border-beam>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import BorderBeam from '~/components/ui/border-beam/BorderBeam.vue';
</script>

<template>
  <div class="relative rounded-xl border p-8">
    <p>Content with border beam effect</p>
    <BorderBeam />
  </div>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        200
      </code>
    </td>
    
    <td>
      Length of the beam in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        15
      </code>
    </td>
    
    <td>
      Animation duration in seconds
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Width of the border/beam in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color-from
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ffaa40'
      </code>
    </td>
    
    <td>
      Start color of the gradient
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color-to
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#9c40ff'
      </code>
    </td>
    
    <td>
      End color of the gradient
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        delay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Animation delay in seconds
    </td>
  </tr>
</tbody>
</table>