DotPattern
dot-patternDraws a token-colored repeating dot background with an SVG pattern.
Usage
Basic usage
Place a layer of DotPattern in the relative container to get a dot matrix background. The default is 16px unit and text-border theme.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<DotPattern />
</div>Adjust density and point diameter
width/height control unit spacing, cr control point radius - increase the spacing and thicken the points to obtain a sparse and large lattice.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<DotPattern width={28} height={28} cr={1.6} />
</div>Change color (eat theme)
Select currentColor as the color, and use the text-* tool to change the color, and the light and dark themes will be automatically adapted.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<DotPattern className="text-primary" />
</div>Mask fade
Overlay mask-image to make the dot matrix fade toward the edge, often used in hero/card background to avoid hard edges.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<DotPattern className="[mask-image:radial-gradient(closest-side,black,transparent)]" />
</div>When to Use
Add a dot matrix texture base to the card/block/Hero. Use this component for dotted textures; use GridPattern for line grids, StripedPattern for diagonal stripes, and Spotlight for radial glow.
Import
import { DotPattern } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | 16 | Tile unit width |
| height | number | 16 | Tile unit height |
| cx | number | 1 | The x offset of the point within the cell |
| cy | number | 1 | The y offset of the point within the cell |
| cr | number | 1 | Point Radius |
| x | number | 0 | pattern overall x offset |
| y | number | 0 | pattern overall y offset |
InheritsComponentPropsWithoutRef<"svg">(className, etc.). The color iscurrentColor, which is controlled by thetext-*tool class (such astext-muted).
Usage Guidelines
- The internal
absolute inset-0is filled with the parent and must be placed inside therelative(and usuallyoverflow-hidden) positioning container, otherwise it cannot be positioned/will overflow. - The color depends on
currentColor, usetext-*to change the color instead offill.
Related
GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple · Meteors
Playground
<div className="relative">
<DotPattern width={16} cr={1} />
</div>