Dotted Background
DisplayDotted-grid background pattern — subtle texture without competing for attention.
Dotted BackgroundDisplay · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import DottedBackground from @otfdashkit/ui.
Code
// Dotted Background — Dotted-grid background pattern — subtle texture without competing for attention.
//
// Install:
// bun add @otfdashkit/ui
import { DottedBackground } from '@otfdashkit/ui'
export function Example() {
return (
<DottedBackground>
{/* your content */}
</DottedBackground>
)
}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 |