Dot Pattern
MotionA dot or grid background drawn as one SVG pattern, faded at the edges, with an optional accent glow that follows the pointer and lights the dots beneath it.
src/registry/premium/dot-pattern.tsx/r/dot-pattern.json
Installation#
bash
npx shadcn@latest add https://ui.minidev.pro/r/dot-pattern.json
Usage#
tsx
import { DotPattern } from "@/components/ui/dot-pattern"
export function Example() {
return <DotPattern />
}
API reference#
| Prop | Type | Default |
|---|---|---|
variant | "dots" | "grid" | "dots" |
gap | number | 18 |
weight | number | 1 |
glow | boolean | true |
fade | boolean | true |
className | string | - |
children | React.ReactNode | - |
Dependencies#
npm
motion
Built from
No other MiniDev files
Related layout components#
AccordionAccessible React accordion on Base UI, with bordered items, a rotating chevron and animated panels. Keyboard navigable, with one or many items open at once.App ShellTailwind app shell layout with a fixed width sidebar slot, a topbar slot and a scrolling main area. The sidebar hides below the md breakpoint for mobile.Aspect RatioShadcn compatible aspect ratio wrapper that locks media to a ratio such as 16:9 or 1:1 using CSS aspect-ratio, with overflow clipped for images and video.CardShadcn compatible card with header, title, description, action, content and footer slots, a compact size and edge to edge images. Built for Tailwind v4.CenterLayout helper that centers content horizontally and vertically in a narrow, text-centered column. Handy for empty states, auth screens and simple heroes.ClusterFlex layout primitive that wraps children in a row with vertical centering and a numeric gap on the 4px scale. Great for tags, buttons and meta rows.
All layout components