DocsComponentsBlog
Star us
Docs

Dot

A dot background component

Installation

Run the following command

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

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

Paste the code

Open the newly created file and paste the following code:

interface DotProps {
  /**
   * Color of the dot
   */
  color?: string;
 
  /**
   * Size of the dot in pixels
   */
  size?: number;
 
  /**
   * Spacing between dots
   */
  spacing?: number;
 
  /**
   * Content of the component
   */
  children?: React.ReactNode;
 
  /**
   * Class name
   */
  className?: string;
 
  style?: React.CSSProperties;
}
 
function Placeholder() {
  return (
    <div className="flex h-full min-h-64 w-full min-w-72 items-center justify-center">
      <div className="rounded bg-white px-4 py-2">This has dot background</div>
    </div>
  );
}
 
export default function Dot({
  color = "#cacaca",
  size = 1,
  spacing = 10,
  children,
  className,
  style = {
    backgroundColor: "white",
  },
}: DotProps) {
  return (
    <div
      style={{
        ...style,
        backgroundImage: `radial-gradient(${color} ${size}px, transparent ${size}px)`,
        backgroundSize: `calc(${spacing} * ${size}px) calc(${spacing} * ${size}px)`,
      }}
      className={className}
    >
      {children ?? <Placeholder />}
    </div>
  );
}

Credits

Built by hari

Based on pattern.css by bansal.io

Edit this page on GitHub
Diagonal LinesGrid