Striped Grid

Animated diagonal stripes with optional base grid, creating a dynamic textured background.

StripedGrid,
Background.

gliding right, setting the path.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/striped-grid.json

Usage

import { StripedGrid } from "@/components/ui/striped-grid";
<StripedGrid
      speed="3s"
      className="relative h-[400px] w-full flex flex-col items-center justify-center"
    >
      <h2 className="bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
        StripedGrid, <br /> Background.
      </h2>
      <p className="max-w-xl mx-auto text-sm md:text-lg text-neutral-700 dark:text-neutral-400 text-center">
        gliding right, setting the path.
      </p>
    </StripedGrid>

Examples

Direction

StripedGrid,
Background.

gliding left, setting the path.

API Reference

Striped Grid

Animated diagonal stripes with optional base grid, creating a dynamic textured background.

Props

PropertyTypeDefaultDescription
speedstring"15s"
Controls the animation duration of the moving diagonal stripes (e.g., '10s', '20s').
opacitynumber0.3
Opacity of the moving stripes. Lower values make stripes subtle, higher values more visible.
direction"left" | "right""right"
Direction in which the diagonal stripes move. Determines whether animation shifts left or right.
stripeColorstring"16, 185, 129"
RGB values (without alpha) for stripe color. Used inside rgba(). Example: '255, 99, 71'.
stripeWidthstring"2px"
Thickness of each diagonal stripe (e.g., '2px', '4px').
stripeSpacingstring"8px"
Spacing between repeated diagonal stripes. Controls density of pattern.
backgroundColorstring"#ffffff"
Base background color behind all grid and stripe layers.
enableBaseGridbooleantrue
Enables the underlying static square grid behind the moving stripes.
baseGridOpacitynumber0.15
Opacity of the static base grid lines. Works when enableBaseGrid is true.
classNamestring—
Additional Tailwind or custom class names applied to the container.
childrenReact.ReactNode—
Content rendered above all animated layers.

Built withby Ahdeetai.