Dot Grid
A responsive patterned panel with adjustable spacing.
import "./styles/dot-grid.css";
export default function DotGrid({ variant = "Fine" }: { variant?: string }) {
return <div className={`ward-dot-grid ${variant === "Wide" ? "is-wide" : ""}`} aria-label="Subtle dot grid background"><span>Make room for the work.</span></div>;
}.ward-dot-grid { display: grid; place-items: center; width: 100%; min-height: 240px; border: 1px solid var(--border); border-radius: 12px; color: var(--foreground); background-color: var(--muted); background-image: radial-gradient(circle, color-mix(in oklab, var(--foreground) 22%, transparent) 1px, transparent 1px); background-size: 20px 20px; }
.ward-dot-grid.is-wide { background-size: 36px 36px; }
.ward-dot-grid span { padding: 6px 12px; border-radius: 999px; background: var(--background); box-shadow: 0 0 0 1px var(--border); font-weight: 500; }Installation
pnpm dlx shadcn@latest add @ward/dot-gridnpx shadcn@latest add @ward/dot-gridyarn dlx shadcn@latest add @ward/dot-gridbunx --bun shadcn@latest add @ward/dot-gridAdd the Ward registry to components.json once:
"registries": {
"@ward": "https://ward.so/r/{name}.json"
}Or install from the URL with no configuration: npx shadcn@latest add https://ward.so/r/dot-grid.json
Copy each file from the Code tab into:
components/ward/DotGrid.tsxcomponents/ward/styles/dot-grid.css
Update the import paths to match your project.
Usage
import DotGrid from "@/components/ward/DotGrid";<DotGrid variant="Wide" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "Fine" | "Wide" | "Fine" | Spacing of the dots in the background grid. |
Ward · Version 1.1.0 · Registry manifest