Striped Pattern

PreviewCode

@/demos/StripedPatternDemo.tsx

import { StripedPattern } from '@/registry/magicui/striped-pattern'

export function StripedPatternDemo() {
  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border
    "
    >
      <StripedPattern class="
        mask-[radial-gradient(300px_circle_at_center,white,transparent)]
      "
      />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/striped-pattern

bun

bunx shadcn@latest add @magicui-solid/striped-pattern

yarn

yarn dlx shadcn@latest add @magicui-solid/striped-pattern

npm

npx shadcn@latest add @magicui-solid/striped-pattern

Examples

Striped Pattern with a dashed stroke

PreviewCode

@/demos/StripedPatternDashed.tsx

import { StripedPattern } from '@/registry/magicui/striped-pattern'

export function StripedPatternDashed() {
  return (
    <div class="
      relative flex h-75 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border
    "
    >
      <StripedPattern class="stroke-[0.3] [stroke-dasharray:8,4]" />
    </div>
  )
}

Striped Pattern To Right

PreviewCode

@/demos/StripedPatternRight.tsx

import { StripedPattern } from '@/registry/magicui/striped-pattern'

export function StripedPatternRight() {
  return (
    <div class="
      relative flex h-75 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border
    "
    >
      <StripedPattern direction="right" />
    </div>
  )
}

Usage

import { StripedPattern } from '@/components/magicui/striped-pattern'

<div className="relative h-[500px] w-full overflow-hidden">
  <StripedPattern />
</div>

Props

StripedPattern

Prop	Type	Default	Description
width	number	10	Width of the pattern
height	number	10	Height of the pattern
direction	"left" "right"	"left"	Line direction
class	string	-	Additional classes on the root SVG

Credits

• Credit to @chishiyac

Original:

magicui.design/docs/components/striped-pattern