Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Dot Pattern

Dot Pattern

A background dot pattern made with SVGs, fully customizable using Tailwind CSS.

Dot Pattern

Installation

npx shadcn@latest add "https://magicui.design/r/dot-pattern"

Examples

Linear Gradient

Dot Pattern

Props

Dot Pattern

PropTypeDescriptionDefault
widthanyWidth of the dot pattern16
heightanyHeight of the dot pattern16
xanyX position of the dot0
yanyY position of the dot0
cxanyX position of the circle1
cyanyY position of the circle1
cranyRadius of the circle1
classNamestringClass name of the dot pattern-