Texture Overlay

Texture Overlay is a React component for shadcn/ui built on pure CSS gradients. Use it to add subtle texture to hero backgrounds, cards, and section dividers.

Installation

pnpmnpmyarnbun
Copy
pnpm dlx shadcn@latest add @cult-ui/texture-overlay

Usage

Copy
import { TextureOverlay } from "@/components/ui/texture-overlay";

Basic Usage

Copy
<TextureOverlay texture="dots" />
<TextureOverlay texture="grid" opacity={0.5} />
<TextureOverlay texture="none" />

With Custom Styling

Copy
<div className="relative bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg p-8">
  <TextureOverlay texture="grid" className="mix-blend-overlay" />
  <div className="relative z-10">
    <h2>Content with texture overlay</h2>
  </div>
</div>

API Reference

Props

TextureType

The TextureType union includes the following options:

• "dots" - Small circular dots pattern
• "grid" - Grid lines pattern
• "noise" - Random noise pattern
• "crosshatch" - Crosshatch pattern
• "diagonal" - Diagonal lines pattern
• "radialDots" - Radial dots from center
• "scatteredDots" - Scattered dots pattern
• "halftone" - Halftone dots pattern
• "triangular" - Triangular pattern
• "chevron" - Chevron pattern
• "paperGrain" - Paper grain texture
• "horizontalLines" - Horizontal lines
• "verticalLines" - Vertical lines
• "none" - No texture (component returns null)

Examples

Card with Texture Background

Copy
<div className="relative bg-card rounded-lg p-6 shadow-lg">
  <TextureOverlay texture="paperGrain" opacity={0.3} />
  <div className="relative z-10">
    <h3 className="text-lg font-semibold">Card Title</h3>
    <p className="text-muted-foreground">Card content with subtle texture</p>
  </div>
</div>

Hero Section with Texture

Copy
<section className="relative min-h-screen bg-gradient-to-br from-slate-900 to-slate-800">
  <TextureOverlay texture="noise" opacity={0.4} />
  <div className="relative z-10 flex items-center justify-center">
    <div className="text-center">
      <h1 className="text-4xl font-bold text-white">Hero Title</h1>
      <p className="text-slate-300">Hero subtitle with texture background</p>
    </div>
  </div>
</section>

Multiple Texture Layers

Copy
<div className="relative bg-background rounded-lg p-8">
  <TextureOverlay texture="grid" opacity={0.2} />
  <TextureOverlay texture="dots" opacity={0.1} className="mix-blend-multiply" />
  <div className="relative z-10">
    <h2>Layered Textures</h2>
    <p>Combining multiple texture patterns</p>
  </div>
</div>

Styling

The component uses CSS gradients to create texture patterns. You can customize the appearance by:

• Adjusting the opacity prop for transparency
• Adding custom className for additional styling
• Using CSS blend modes like mix-blend-overlay or mix-blend-multiply
• Combining multiple TextureOverlay components for layered effects

Performance

The component is optimized for performance by:

• Using CSS gradients instead of images
• Minimal DOM footprint (single div element)
• No JavaScript animations or calculations
• Lightweight and fast rendering

Accessibility

The component is designed to be accessible:

• Uses pointer-events-none to ensure it doesn't interfere with user interactions
• Positioned absolutely to not affect document flow
• Can be safely used as decorative elements