Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
import { StripedPattern } from "@/registry/magicui/striped-pattern"
export function StripedPatternDemo() {
return (
<div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">
<StripedPattern className="[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]" />
</div>
)
}
Installation
pnpm dlx shadcn@latest add "https://magicui.design/r/striped-pattern"
Examples
Striped Pattern with a colored stroke
import { StripedPattern } from "@/registry/magicui/striped-pattern"
export function StripedPatternColored() {
return (
<div className="relative flex h-[300px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">
<StripedPattern className="stroke-[0.3] text-orange-500/60" />
</div>
)
}
Striped Pattern To Right
import { StripedPattern } from "@/registry/magicui/striped-pattern"
export function StripedPatternRight() {
return (
<div className="relative flex h-[300px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">
<StripedPattern direction="right" />
</div>
)
}
Usage
import { StripedPattern } from "@/components/ui/striped-pattern"<div className="relative h-[500px] w-full overflow-hidden">
<StripedPattern />
</div>Props
StripedPattern
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 40 | Width of the pattern |
height | number | 40 | Height of the pattern |
x | number | -1 | X offset of the pattern |
y | number | -1 | Y offset of the pattern |
direction | "left" | "right" | "left" | Line direction |
On This Page
InstallationExamplesStriped Pattern with a colored strokeStriped Pattern To RightUsagePropsStripedPatternLimited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
Next.js 15 + TypeScript ready
Copy, paste, customize in minutes
Save 100+ hours of development