Dot Pattern

PreviewCode

@/demos/DotPatternDemo.tsx

import { DotPattern } from '@/registry/magicui/dot-pattern'

export function DotPatternDemo() {
  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border bg-background
    "
    >
      <DotPattern class="
        mask-[radial-gradient(300px_circle_at_center,white,transparent)]
      "
      />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/dot-pattern

bun

bunx shadcn@latest add @magicui-solid/dot-pattern

yarn

yarn dlx shadcn@latest add @magicui-solid/dot-pattern

npm

npx shadcn@latest add @magicui-solid/dot-pattern

Examples

Linear Gradient

PreviewCode

@/demos/DotPatternLinearGradient.tsx

import { DotPattern } from '@/registry/magicui/dot-pattern'

export function DotPatternLinearGradient() {
  return (
    <div class="
      relative flex size-full items-center justify-center overflow-hidden
      rounded-lg border bg-background p-20
    "
    >
      <DotPattern
        width={20}
        height={20}
        cx={1}
        cy={1}
        cr={1}
        class="
          mask-[linear-gradient(to_bottom_right,white,transparent,transparent)]
        "
      />
    </div>
  )
}

With Glow Effect

PreviewCode

@/demos/DotPatternWithGlowEffectDemo.tsx

import { DotPattern } from '@/registry/magicui/dot-pattern'

export function DotPatternWithGlowEffectDemo() {
  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden
    "
    >
      <DotPattern
        glow={true}
        class="mask-[radial-gradient(300px_circle_at_center,white,transparent)]"
      />
    </div>
  )
}

Usage

import { DotPattern } from '@/components/magicui/dot-pattern'

<div className="relative h-[500px] w-full overflow-hidden">
  <DotPattern />
</div>

Props

Dot Pattern

Prop	Type	Default	Description
width	number	16	Width of the dot pattern
height	number	16	Height of the dot pattern
x	number	0	X position of the dot
y	number	0	Y position of the dot
cx	number	1	X position of the circle
cy	number	1	Y position of the circle
cr	number	1	Radius of the circle
class	string	-	Class name of the dot pattern
glow	boolean	false	Activates the glow effect in the dot pattern

Original:

magicui.design/docs/components/dot-pattern