Horizontal Stripes

A lightweight decorative component that renders a diagonal stripe pattern across the full width. Uses a --pattern CSS custom property for color, making it fully themeable.

Installation

npx shadcn@latest add @grenish/horizontal-stripes

Usage

import HorizontalStripes from "@/components/tools/horizontal-stripes"

export default function Example() {
  return <HorizontalStripes />
}

import { cn } from "@/lib/utils";

type StripesProps = {
  className?: string;
};

export default function HorizontalStripes({ className }: StripesProps) {
  return (
    <div
      className={cn(
        "h-10 w-full bg-[repeating-linear-gradient(-45deg,var(--pattern)_0,var(--pattern)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px]",
        `${className}`,
      )}
    />
  );
}

Features

• CSS-only pattern — No images or SVGs, purely CSS repeating gradients.
• Themeable — Uses --pattern CSS variable for stripe color, adapts to any theme.
• Customizable — Override dimensions, colors, and spacing via className.
• Lightweight — Zero dependencies beyond cn utility.

Props

CSS Variable

The component uses the --pattern CSS custom property for the stripe color. Define it in your CSS:

:root {
  --pattern: hsl(var(--border));
}

Examples

Custom height and color

<HorizontalStripes className="h-20 [--pattern:hsl(var(--primary))]" />

As a section divider

<div className="space-y-8">
  <section>Content above</section>
  <HorizontalStripes className="h-4" />
  <section>Content below</section>
</div>