# Shimmer Button

> A button with a rotating shimmer/glow effect.

<demo-shimmer-button>



</demo-shimmer-button>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import ShimmerButton from '~/components/ui/shimmer-button/ShimmerButton.vue';
</script>

<template>
  <ShimmerButton>Shimmer</ShimmerButton>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        shimmer-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ffffff'
      </code>
    </td>
    
    <td>
      Color of the shimmer effect
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shimmer-size
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '0.05em'
      </code>
    </td>
    
    <td>
      Size of the shimmer border
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shimmer-duration
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '3s'
      </code>
    </td>
    
    <td>
      Duration of the shimmer animation cycle
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        background
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'rgba(0, 0, 0, 1)'
      </code>
    </td>
    
    <td>
      Background color of the button
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>