GridPattern
grid-patternDraws a scalable line grid for decorative section backgrounds.
Usage
Basic usage
Put a layer of GridPattern in the relative container to get the grid background. The default is 40px solid line and text-border eating theme.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<GridPattern />
</div>Dashed grid
strokeDasharray Pass "4 2", which means replacing the solid lines with dotted lines, to create a detailed blueprint feel with smaller units.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<GridPattern width={24} height={24} strokeDasharray="3 2" />
</div>Change color (eat theme)
Set the thread color to currentColor, use the text-* tool class to change the color, and automatically adapt the light and dark themes.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<GridPattern className="text-primary" />
</div>Mask fade
Overlay mask-image to make the grid fade toward the edges, making the hero/block background softer.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<GridPattern className="[mask-image:radial-gradient(closest-side,black,transparent)]" />
</div>When to Use
Give the block a line grid texture (technical feel/blueprint feel). Use this component for line grids; use DotPattern for dotted textures, StripedPattern for diagonal stripes, and RetroGrid for retro grids with perspective scrolling.
Import
import { GridPattern } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | 40 | Unit width |
| height | number | 40 | Unit height |
| x | number | 0 | pattern x offset |
| y | number | 0 | pattern y offset |
| strokeDasharray | string | number | 0 | Grid-line dash pattern; 0 is solid, while a value such as "4 2" creates dashes |
Inherited fromComponentPropsWithoutRef<"svg">. The color iscurrentColor, which is controlled by thetext-*tool class.
Usage Guidelines
- The inner
absolute inset-0overlay parent must be placed inside arelative(and usuallyoverflow-hidden) positioning container. - The color depends on
currentColor, usetext-*to change the color.
Related
DotPattern · StripedPattern · Spotlight · RetroGrid · Ripple · Meteors
Playground
<div className="relative">
<GridPattern width={40} />
</div>