Backgrounds & Effects

Stripe Background Guides

Stripe-style animated grid line background for React and shadcn/ui with glowing highlights, column count, and direction options.

Updated Oct 1, 2026

Stripe Background Guides

Animated background guides with glowing effects, inspired by Stripe's design system.

StripeBgGuides is a React background component for shadcn/ui, animated with Motion. Configure column count, direction, easing, and randomized highlights for landing page heroes, marketing sections, or documentation headers.

Installation


pnpm dlx shadcn@latest add @cult-ui/stripe-bg-guides

Usage


export default function StripeBgGuideDemo() {
  return (
    <div className="relative w-full h-[400px] overflow-hidden rounded-lg border bg-background">
      {/* Modified StripeBgGuides to work within a container */}
      <StripeBgGuides
        columnCount={6}
        animated={true}
        animationDuration={8}
        glowColor="hsl(var(--primary))"
        randomize={true}
        randomInterval={3000}
        contained={true}
      />
 
      {/* Content to demonstrate the background effect */}
      <div className="relative z-10 flex h-full items-center justify-center">
        <div className="max-w-md text-center">
          <h3 className="text-2xl font-bold mb-2">Stripe Background Guides</h3>
          <p className="text-muted-foreground">
            Animated background guides with glowing effects, inspired by
            Stripe's design system.
          </p>
        </div>
      </div>
    </div>
  );
}