How do I install the Dotted Background pattern?

Install the free SDK with `bun add @otfdashkit/ui` (or npm/pnpm) and import { DottedBackground }. Copy-paste distribution is also supported.

Is the Dotted Background pattern free to use?

Yes. Dotted Background ships in @otfdashkit/ui, part of the free MIT-licensed OTF SDK on npm — use it in personal and commercial projects.

Which platform does this Dotted Background page cover?

This page documents the web version (@otfdashkit/ui); the OTF SDK's web and native packages share component names and design tokens where a counterpart exists, but props differ per platform.

Dotted Background

BackgroundsMIT

View in Storybook

Dotted-grid background pattern — subtle texture without competing for attention.

bun add @otfdashkit/ui

Preview

Dotted BackgroundBackgrounds

Loading Storybook preview…

Code

@otfdashkit/ui

import { DottedBackground } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="relative h-[400px]">
      <DottedBackground />
      <div className="relative z-10 flex items-center justify-center h-full">
        <span className="text-foreground text-lg">Dotted pattern</span>
      </div>
    </div>
  )
}

Free with the SDK. This pattern ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the DottedBackground source. Inherited HTML attributes are not listed.

Prop	Type	Default	Description
color	string		Dot color (default uses --border token)
dotSize	number	1	Dot size in px (default 1)
fixed	boolean	false
gap	number	24	Gap between dots in px (default 24)
vignette	boolean	true	Vignette fade at edges

Preview

Code

Props

Related