Signature / Moleculestable

Dot Pattern

Static SVG dot grid background with configurable size, gap, and theme colors.

@glinui/uiComponent: dot-pattern

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add dot-pattern

Usage$

Place inside a relative container for a subtle dot grid background. Fully themeable via props.

Basic$

Dot Pattern

TSX

1import { DotPattern } from "@glinui/ui"
2
3export function DotPatternDemo() {
4return (
5  <div className="relative flex h-48 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
6    <span className="z-10 text-sm font-medium">Dot Pattern</span>
7    <DotPattern />
8  </div>
9)
10}

Examples$

Custom Size and Gap$

Large Dots

TSX

1import { DotPattern } from "@glinui/ui"
2
3export function DotPatternCustomDemo() {
4return (
5  <div className="relative flex h-48 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
6    <span className="z-10 text-sm font-medium">Large Dots</span>
7    <DotPattern dotSize={2.5} gap={30} dotOpacity={0.3} />
8  </div>
9)
10}

With Radial Fade$

Radial Fade

TSX

1import { DotPattern } from "@glinui/ui"
2
3export function DotPatternFadeDemo() {
4return (
5  <div className="relative flex h-48 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
6    <span className="z-10 text-sm font-medium">Radial Fade</span>
7    <DotPattern className="[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]" />
8  </div>
9)
10}

Accessibility$

SVG is marked aria-hidden — invisible to screen readers.
Purely decorative background pattern.

Reduced Motion$

No animation — static SVG pattern. No reduced motion handling needed.

API Reference$

Prop	Type	Required	Default	Description
`cr`	`number`	No	`-`	Auto-generated from TypeScript source.
`dotColor`	`string`	No	`"currentColor"`	Auto-generated from TypeScript source.
`dotOpacity`	`number`	No	`0.2`	Auto-generated from TypeScript source.
`dotSize`	`number`	No	`1.5`	Auto-generated from TypeScript source.
`gap`	`number`	No	`20`	Auto-generated from TypeScript source.

Source$

TSX

1import { DotPattern } from "@glinui/ui"

packages/ui/src/components/dot-pattern.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/dot-pattern.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

DotPatternProps

`DotPatternProps`

Prop	Type	Required	Default	Description
`cr`	`number`	No	`-`	-
`dotColor`	`string`	No	`"currentColor"`	-
`dotOpacity`	`number`	No	`0.2`	-
`dotSize`	`number`	No	`1.5`	-
`gap`	`number`	No	`20`	-