"use client" import { TextureOverlay } from "@/registry/default/ui/texture-overlay" export default function TextureOverlayDemo() { return (

Texture Overlay Showcase

Explore different texture patterns using CSS gradients for adding visual texture to backgrounds and surfaces.

{[ { type: "dots" as const, name: "Dots Pattern" }, { type: "grid" as const, name: "Grid Pattern" }, { type: "noise" as const, name: "Noise Pattern" }, { type: "crosshatch" as const, name: "Crosshatch Pattern" }, { type: "diagonal" as const, name: "Diagonal Pattern" }, { type: "scatteredDots" as const, name: "Scattered Dots" }, { type: "halftone" as const, name: "Halftone Pattern" }, { type: "triangular" as const, name: "Triangular Pattern" }, { type: "chevron" as const, name: "Chevron Pattern" }, { type: "paperGrain" as const, name: "Paper Grain" }, { type: "horizontalLines" as const, name: "Horizontal Lines" }, { type: "verticalLines" as const, name: "Vertical Lines" }, ].map((texture) => (

{texture.name}

{texture.type} texture

))}

Opacity Variations

See how different opacity values affect the texture appearance

{[0.3, 0.6, 1.0].map((opacity) => (

Dots Pattern

Opacity: {opacity}

))}

Custom Styling

Combine with custom classes for unique effects

Grid with Blend Mode

mix-blend-overlay

Noise with Custom Opacity

opacity-50 class

) }

Installation

Files

components

Styles

Installation

Files

components

Styles