Components
Loading preview...
A versatile background pattern component for React, it supports six visual styles and eight customizable mask effects. You can easily add subtle texture or visual flair to any section using pure CSS gradients—no images or external assets required.
npx shadcn@latest add https://21st.dev/r/sshahaider/bg-patternimport { BGPattern } from "@/components/ui/bg-pattern";
export default function DemoOne() {
return (
<div className="mx-auto max-w-4xl space-y-5 p-8">
<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
<BGPattern variant="grid" mask="fade-edges" />
<h2 className="text-3xl font-bold">Grid Background</h2>
<p className="text-muted-foreground font-mono">With (fade-edges) Mask</p>
</div>
<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
<BGPattern variant="dots" mask="fade-center" />
<h2 className="text-3xl font-bold">Dots Background</h2>
<p className="text-muted-foreground font-mono">With (fade-center) Mask</p>
</div>
<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
<BGPattern variant="diagonal-stripes" mask="fade-y" />
<h2 className="text-3xl font-bold">Diagonal Stripes</h2>
<p className="text-muted-foreground font-mono">With (fade-y) Mask</p>
</div>
<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
<BGPattern variant="horizontal-lines" mask="fade-right" />
<h2 className="text-3xl font-bold">Horizontal Lines</h2>
<p className="text-muted-foreground font-mono">With (fade-right) Mask</p>
</div>
<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
<BGPattern variant="vertical-lines" mask="fade-bottom" />
<h2 className="text-3xl font-bold">Vertical Lines</h2>
<p className="text-muted-foreground font-mono">With (fade-bottom) Mask</p>
</div>
<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
<BGPattern variant="checkerboard" mask="fade-top" />
<h2 className="text-3xl font-bold">Checkerboard Background</h2>
<p className="text-muted-foreground font-mono">With (fade-top) Mask</p>
</div>
</div>
);
}