Components
Loading preview...
Here is Background snippets component
@bg.ibelick
npx shadcn@latest add https://21st.dev/r/bg.ibelick/background-snippetsexport default function Component() {
return (
<div className="fixed inset-0 -z-10 bg-white">
{/* Dots layer */}
<div
className={[
"pointer-events-none absolute inset-0",
"bg-[radial-gradient(#e5e7eb_1px,transparent_1px)]",
"[background-size:16px_16px]",
// Mask the edges so the dots fade out toward the sides
"[mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,#000_70%,transparent_100%)]",
"[-webkit-mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,#000_70%,transparent_100%)]",
"[mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]",
].join(" ")}
/>
</div>
);
}