DocsComponents
Star us
Docs

Zigzag

A zigzag background component

Installation

Update tailwind.config.js

theme: {
    extend: {
     colors: {
        background: "hsl(var(--background))",
     }
    },
  },

Run the following command

It will create a new file called zigzag.tsx inside the components/animata/background directory.

mkdir -p components/animata/background && touch components/animata/background/zigzag.tsx

Paste the code

Open the newly created file and paste the following code:

import { cn } from "@/lib/utils";
 
interface ZigZagProps {
  /**
   * Color of the pattern
   */
  color?: string;
 
  /**
   * Size of the pattern in pixels
   */
  size?: number;
 
  /**
   * Content of the component
   */
  children?: React.ReactNode;
 
  /**
   * Additional classes
   */
  className?: string;
}
 
function Placeholder() {
  return (
    <div className="flex max-h-full min-h-64 min-w-72 max-w-full items-center justify-center">
      <div className="rounded bg-white px-4 py-2">This has zigzag background</div>
    </div>
  );
}
 
export default function ZigZag({ color = "#cacaca", size = 10, children, className }: ZigZagProps) {
  return (
    <div className={cn("bg-background", className)}>
      <div
        key={`zigzag-${color}-${size}`}
        style={{
          background: `linear-gradient(135deg, ${color} 25%, transparent 25%) -${size}px 0,
        linear-gradient(225deg, ${color} 25%, transparent 25%) -${size}px 0,
        linear-gradient(315deg, ${color} 25%, transparent 25%),
        linear-gradient(45deg, ${color} 25%, transparent 25%)`,
          backgroundSize: `calc(2 * ${size}px) calc(2 * ${size}px)`,
        }}
      >
        {children ?? <Placeholder />}
      </div>
    </div>
  );
}

Credits

Built by hari

Based on pattern.css by bansal.io

Edit this page on GitHub
Moving GradientBento grids overview