NewAI SDK Agents

BackgroundImageTexture

PreviousNext

A background texture component with multiple texture variants and customizable opacity

Texture Controls
Select a texture variant and adjust the opacity
Preview with Content
See how the texture looks with content on top

Texture Background

This content sits on top of the texture layer. Adjust the opacity slider to see how the texture affects the background. The texture is fully interactive and customizable.

Feature 1

Content with texture background

Feature 2

More content examples

All Texture Variants

fabric of squares

fabric-of-squares

Opacity: 0.5

grid noise

grid-noise

Opacity: 0.5

inflicted

inflicted

Opacity: 0.5

debut light

debut-light

Opacity: 0.5

groovepaper

groovepaper

Opacity: 0.5

Opacity Variations

Opacity: 0.2

grid-noise texture

Opacity: 0.2

Opacity: 0.5

grid-noise texture

Opacity: 0.5

Opacity: 0.8

grid-noise texture

Opacity: 0.8

Use Case Examples

Card with Texture

Beautiful Card

Cards look great with subtle texture backgrounds

Hero Section

Hero Title

Perfect for hero sections and banners

Installation

pnpm dlx shadcn@latest add https://cult-ui.com/r/bg-image-texture.json

Usage

import { BackgroundImageTexture } from "@/components/ui/bg-image-texture"

Basic Usage

Apply a texture background to any container:

<BackgroundImageTexture variant="fabric-of-squares" opacity={0.5}>
  <div className="p-8">
    <h2>Content with texture background</h2>
    <p>Your content goes here</p>
  </div>
</BackgroundImageTexture>

Texture Variants

Choose from five different texture patterns:

// Fabric of squares pattern
<BackgroundImageTexture variant="fabric-of-squares" opacity={0.5}>
  <div>Content</div>
</BackgroundImageTexture>
 
// Grid noise pattern
<BackgroundImageTexture variant="grid-noise" opacity={0.5}>
  <div>Content</div>
</BackgroundImageTexture>
 
// Inflicted pattern
<BackgroundImageTexture variant="inflicted" opacity={0.5}>
  <div>Content</div>
</BackgroundImageTexture>
 
// Debut light pattern
<BackgroundImageTexture variant="debut-light" opacity={0.5}>
  <div>Content</div>
</BackgroundImageTexture>
 
// Groovepaper pattern
<BackgroundImageTexture variant="groovepaper" opacity={0.5}>
  <div>Content</div>
</BackgroundImageTexture>
 
// No texture (transparent)
<BackgroundImageTexture variant="none" opacity={0.5}>
  <div>Content</div>
</BackgroundImageTexture>

Opacity Control

Adjust the opacity to control how visible the texture is:

// Subtle texture (low opacity)
<BackgroundImageTexture variant="grid-noise" opacity={0.2}>
  <div>Content</div>
</BackgroundImageTexture>
 
// Medium texture (default)
<BackgroundImageTexture variant="grid-noise" opacity={0.5}>
  <div>Content</div>
</BackgroundImageTexture>
 
// Bold texture (high opacity)
<BackgroundImageTexture variant="grid-noise" opacity={0.8}>
  <div>Content</div>
</BackgroundImageTexture>

Without Children

The component can be used without children for a pure background texture:

<BackgroundImageTexture
  variant="fabric-of-squares"
  opacity={0.5}
  className="h-64 w-full rounded-lg"
/>

API Reference

BackgroundImageTexture Props

PropTypeDefaultDescription
variantTextureVariant"fabric-of-squares"Texture pattern variant
opacitynumber0.5Opacity of the texture (0 to 1)
classNamestring-Additional CSS classes for the container
childrenReact.ReactNode-Content to display on top of the texture

TextureVariant Type

type TextureVariant =
  | "fabric-of-squares"
  | "grid-noise"
  | "inflicted"
  | "debut-light"
  | "groovepaper"
  | "none"

Features

  • Multiple Texture Variants: Choose from 5 different texture patterns
  • Customizable Opacity: Control texture visibility from 0 to 1
  • Flexible Usage: Use with or without children content
  • Accessible: Texture layer is marked with aria-hidden="true"
  • Non-Interactive: Texture layer has pointer-events-none to allow interaction with content
  • Responsive: Works seamlessly across all screen sizes

Examples

Card with Texture

Add texture to card components:

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent className="p-0">
    <BackgroundImageTexture
      variant="debut-light"
      opacity={0.3}
      className="rounded-b-lg p-6"
    >
      <div>
        <h4 className="font-semibold">Card Content</h4>
        <p className="text-sm text-muted-foreground">
          Cards look great with subtle texture backgrounds
        </p>
      </div>
    </BackgroundImageTexture>
  </CardContent>
</Card>

Hero Section

Use texture in hero sections:

<BackgroundImageTexture
  variant="groovepaper"
  opacity={0.4}
  className="rounded-lg p-12 min-h-[400px] flex items-center justify-center"
>
  <div className="text-center space-y-4">
    <h1 className="text-4xl font-bold">Hero Title</h1>
    <p className="text-lg text-muted-foreground">
      Perfect for hero sections and banners
    </p>
  </div>
</BackgroundImageTexture>

All Variants Showcase

Display all texture variants:

const variants = [
  "fabric-of-squares",
  "grid-noise",
  "inflicted",
  "debut-light",
  "groovepaper",
] as const
 
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
  {variants.map((variant) => (
    <BackgroundImageTexture
      key={variant}
      variant={variant}
      opacity={0.5}
      className="rounded-lg border border-border p-6 h-48 flex items-center justify-center"
    >
      <div className="text-center">
        <p className="text-sm font-medium">{variant}</p>
      </div>
    </BackgroundImageTexture>
  ))}
</div>

Opacity Variations

Compare different opacity levels:

const opacities = [0.2, 0.5, 0.8]
 
<div className="grid grid-cols-3 gap-4">
  {opacities.map((opacity) => (
    <BackgroundImageTexture
      key={opacity}
      variant="grid-noise"
      opacity={opacity}
      className="rounded-lg border border-border p-6 h-48 flex items-center justify-center"
    >
      <div className="text-center">
        <p className="text-sm font-medium">Opacity: {opacity}</p>
      </div>
    </BackgroundImageTexture>
  ))}
</div>

Dynamic Opacity Control

Use state to control opacity dynamically:

import { useState } from "react"
 
import { BackgroundImageTexture } from "@/components/ui/bg-image-texture"
import { Slider } from "@/components/ui/slider"
 
function DynamicTextureExample() {
  const [opacity, setOpacity] = useState([0.5])
 
  return (
    <div className="space-y-4">
      <Slider
        value={opacity}
        onValueChange={setOpacity}
        min={0}
        max={1}
        step={0.01}
      />
      <BackgroundImageTexture
        variant="fabric-of-squares"
        opacity={opacity[0]}
        className="rounded-lg p-8 min-h-[300px]"
      >
        <div>
          <h3 className="text-2xl font-bold mb-2">Dynamic Texture</h3>
          <p>Adjust the slider to change texture opacity</p>
        </div>
      </BackgroundImageTexture>
    </div>
  )
}

Custom Styling

Apply custom styles to the container:

<BackgroundImageTexture
  variant="grid-noise"
  opacity={0.5}
  className="rounded-xl border-2 border-primary p-8 shadow-lg"
>
  <div>Custom styled content</div>
</BackgroundImageTexture>

Section Dividers

Use texture as decorative section dividers:

<section className="py-12">
  <BackgroundImageTexture
    variant="inflicted"
    opacity={0.2}
    className="h-32 w-full"
  />
</section>