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
| Prop | Type | Default | Required |
|---|---|---|---|
| opacity | number | 0.035 | no |
| children | React.ReactNode | — | no |
Details
Source filecomponents/ui/noise-texture.tsx
Typeui
Categoriesbackgrounds
npm dependenciesclsx, tailwind-merge
Registry deps—
Claude skill—