Dot Pattern
Fully Customisable Animated Background Component.
Loading...
Installation
npx shadcn@latest add https://thetaui.vercel.app/r/dot-pattern.jsonpnpm dlx shadcn@latest add https://thetaui.vercel.app/r/dot-pattern.jsonyarn shadcn@latest add https://thetaui.vercel.app/r/dot-pattern.jsonbunx --bun shadcn@latest add https://thetaui.vercel.app/r/dot-pattern.jsonUsage
import { DotPattern } from "@/components/ui/dot-pattern";
const DotPatternDemo = () => {
return (
<section className="relative flex h-full w-full items-center justify-center">
<DotPattern glow/>
<p className="text-primary -mt-10 text-5xl font-bold tracking-tight lg:text-8xl lg:tracking-tighter">
Dotted Background
</p>
</section>
);
};
export default DotPatternDemo;