StripedPattern
striped-patternCreates diagonal stripes as a lightweight CSS decorative surface.
Usage
Basic usage
relative Place a layer of StripedPattern in the container to get a diagonal stripe background, the default is 45°, 10px unit, text-border.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<StripedPattern />
</div>Angle and density
angle controls the stripe inclination angle, size controls the stripe + spacer unit width - vertical sparse stripes, that is, angle=90, size increases.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<StripedPattern angle={90} size={20} />
</div>Change color (eat theme)
The stripe color is currentColor, use the text-* tool class to change the color, and the light and dark themes are automatically adapted.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<StripedPattern className="text-primary" />
</div>Mask fade
Overlay mask-image to make the stripes fade toward the edges and make the background of the block softer.
<div className="relative h-48 w-full overflow-hidden rounded-xl border border-border bg-surface">
<StripedPattern className="[mask-image:radial-gradient(closest-side,black,transparent)]" />
</div>When to Use
Apply diagonal stripe shading to the area (warning strips/construction sense/texture separation). Use this component for stripes; DotPattern for dots, GridPattern for line grids, and Spotlight for radial glow.
Import
import { StripedPattern } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| angle | number | 45 | Stripe angle (degrees) |
| size | number | 10 | Width in pixels of one stripe-and-gap unit |
Inherited fromComponentPropsWithoutRef<"div">. The color iscurrentColorand controlled by thetext-*tool class.
Usage Guidelines
- Internal
absolute inset-0is parented and must be placed inside arelative(and usuallyoverflow-hidden) positioning container. - The color depends on
currentColor, andtext-*is used to change the color.
Related
DotPattern · GridPattern · Spotlight · RetroGrid · Ripple · Meteors
Playground
<div className="relative">
<StripedPattern angle={45} size={10} />
</div>