Dot Pattern
import React from "react";
import DotBackground from "@/registry/zedUI/dot-background";
const DotBackgroundDemo = () => {
return (
<div className="relative h-[50vh] w-full"> {/* Parent */ }
<DotBackground />
<div className=" flex items-center justify-center w-full h-full z-10 relative">
{/* Children or section */}
</div>
</div>
);
};
export default DotBackgroundDemo;
Installation
npx shadcn@latest add https://zedui.vercel.app/r/dot-background.jsonpnpm dlx shadcn@latest add https://zedui.vercel.app/r/dot-background.jsonyarn dlx shadcn@latest add https://zedui.vercel.app/r/dot-background.jsonbun x shadcn@latest add https://zedui.vercel.app/r/dot-background.jsonCopy and paste the following code into your project.
import React from "react";
type DotBackgroundProps = {
dotColor?: string; // rgba() or hex
dotSize?: number; // px
gap?: number; // px between dots
mask?: boolean;
className?: string;
};
const DotBackground: React.FC<DotBackgroundProps> = ({
dotColor = "var(--color-muted-foreground)", // Default color
dotSize = 0.8,
gap = 32,
mask = true,
className,
}) => {
const backgroundImage = `radial-gradient(at center center, ${dotColor} ${dotSize}px, transparent 0)`;
const maskStyle = mask
? {
maskImage: "radial-gradient(circle at center, white 10%, transparent 90%)",
WebkitMaskImage: "radial-gradient(circle, white 10%, transparent 90%)",
}
: {};
return (
<div
className={`absolute inset-0 pointer-events-none z-0 ${className}`}
style={{
backgroundImage: backgroundImage,
backgroundSize: `${gap}px ${gap}px`,
backgroundRepeat: "repeat",
...maskStyle,
}}
/>
);
};
export default DotBackground;
Usage
This component must be placed inside a container with relative positioning.
Your foreground content should have relative z-10 to appear above the dots.
Props
| Prop | Type | Default |
|---|---|---|
className? | string | - |
mask? | boolean | true |
gap? | number | 32 |
dotSize? | number | 0.8 |
dotColor? | string | var(--color-muted-foreground) |