Pricing

Striped Pattern

A background striped pattern made with SVGs, fully customizable using Tailwind CSS.

6,150

Bookmarks

14,350

Installs

114,950

Views

9 lines
import { StripedPattern } from "@/components/ui/striped-pattern"

export default 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)]" />

3 more lines behind a plan

Previews are free to watch. Reading and copying the full source needs a plan.

See plans
Dependencies
None — plain React + Tailwind
License
MIT License
Published
1/12/2025
Categories

Similar components

That's all 6 components

Explore more

Part of Magic UI — browse the full library on Nuxus.