Skip to main content
ParticleUI

Noise Texture

SVG fractal noise overlay that adds depth and premium feel to any surface.

opacity 0.03
opacity 0.06
opacity 0.1

Installation

1

Run the CLI

$npx particleui-cli add noise-texture

Usage

TSX
import { NoiseTexture } from "@/components/ui/noise-texture"

export default function Example() {
  return (
    <div className="relative h-48 w-full rounded-xl bg-neutral-900 overflow-hidden">
      <NoiseTexture opacity={0.08} />
      <div className="relative z-10 flex h-full items-center justify-center">
        <p className="text-white font-semibold">Content over noise</p>
      </div>
    </div>
  )
}

Props

PropTypeDefaultRequired
opacitynumber0.035no
childrenReact.ReactNodeno

Details

Source filecomponents/ui/noise-texture.tsx
Typeui
Categoriesbackgrounds
npm dependenciesclsx, tailwind-merge
Registry deps
Claude skill