A diagonal striped background pattern that can be customized with direction and styling using Tailwind CSS.
Installation
import { StripedPattern } from "@/components/ui/striped-pattern"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden">
<StripedPattern />
</div>
)
}
Right Direction
import { StripedPattern } from "@/components/ui/striped-pattern"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden">
<StripedPattern direction="right" />
</div>
)
}
Dashed Stroke
import { StripedPattern } from "@/components/ui/striped-pattern"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden">
<StripedPattern className="stroke-dashed" />
</div>
)
}
| Prop | Type | Default | Description |
|---|
direction | "left" | "right" | "left" | Direction of the diagonal stripes |
width | number | 10 | Width of the pattern cell |
height | number | 10 | Height of the pattern cell |
className | string | - | Additional CSS classes for the SVG element |
Control the stripe color using text color utility classes like text-gray-400 in the className prop.
The pattern automatically fills the container and can be layered with other components.