# Noise Texture

> A subtle noise overlay that adds texture and depth to any container.

<demo-noise-texture>



</demo-noise-texture>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import NoiseTexture from '~/components/ui/noise-texture/NoiseTexture.vue';
</script>

<template>
  <NoiseTexture class="h-75 w-full bg-linear-to-br from-violet-500 to-pink-500">
    <p class="text-3xl font-bold text-white">Noise Texture</p>
  </NoiseTexture>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.04
      </code>
    </td>
    
    <td>
      Opacity of the noise overlay (0-1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes for the container
    </td>
  </tr>
</tbody>
</table>