CurvedArrow is a DOM-aware, highly flexible React component for rendering animated, curved SVG arrows between two elements or coordinates. It supports gradient strokes, multiple curve styles, custom arrowheads, obstacle avoidance, and precise two-layer rendering — built for performance, accessibility, and dynamic UI experiences such as animated, curved SVG arrows between elements or coordinates. Perfect for diagrams, flowcharts, tutorials, and interactive UIs.

CurvedArrow is fully compatible with shadcn/ui and the Shadcn Registry ecosystem:

• ✅ Tailwind + CVA-based styling (variant & size)
• ✅ Accessible & ARIA-compliant
• ✅ TypeScript-ready
• ✅ Drop-in for awesome-shadcn projects
• ✅ Easily installable via NPM, Bun, or PNPM

# npm
npx shadcn@canary add https://dsa.hncore.website/r/curved-arrow.json

# bun
bunx --bun shadcn@canary add https://dsa.hncore.website/r/curved-arrow.json

# pnpm
pnpx shadcn@canary add https://dsa.hncore.website/r/curved-arrow.json

Import the component:

import { CurvedArrow } from "@/components/curved-arrow";

function Demo() {
  return <CurvedArrow startX={0} startY={0} endX={200} endY={200} />;
}

Built with Modern.js — a next-generation React framework for speed and scalability. It powers this project’s landing and docs with:

• ⚡️ Ultra-fast builds (Rsbuild / Rspack)
• 🧩 Hybrid SSR & SSG rendering
• 📖 Native MDX docs integration
• 🎨 Seamless Tailwind + TypeScript support
• 🚀 Optimized static & server deployments

• 🎯 Flexible Positioning – Connect via element refs or coordinates
• 🌈 Customizable Curves – smooth, s-curve, wave, zigzag, around-obstacle, and more
• 🧭 Obstacle Avoidance – Smart rerouting around elements
• 🖋️ Stylable Arrowheads – Multiple shapes, colors, and fill options
• 🧩 Two-Layer Rendering – Correct z-index stacking (UNDER / OVER)
• 💫 Animations – Optional motion dash overlay with duration & direction
• ⚙️ Performance Optimized – Uses observers + batched requestAnimationFrame updates
• ♿ Accessible – ARIA labels, roles, and semantic layers
• 🎨 Tailwind Integration – Style variants via class-variance-authority

import { CurvedArrow } from "./CurvedArrow";
import { useRef } from "react";

function Example() {
  const aRef = useRef(null);
  const bRef = useRef(null);

  return (
    <div className="relative h-64 w-full">
      <div ref={aRef} className="absolute z-1 w-16 h-16 bg-blue-200">
        A
      </div>
      <div ref={bRef} className="absolute z-5 w-16 h-16 bg-red-200 right-0">
        B
      </div>
      <CurvedArrow startElement={aRef} endElement={bRef} />
    </div>
  );
}

<CurvedArrow
  startX={50}
  startY={50}
  endX={200}
  endY={200}
  curveType="s-curve"
  color="#FF5733"
  showStartArrow
  startArrowShape="circle"
/>

const obstacleRef = useRef(null);
<CurvedArrow
  startElement={aRef}
  endElement={bRef}
  obstacleElements={[obstacleRef]}
  curveType="around-obstacle"
/>
<div ref={obstacleRef} className="absolute z-1 w-32 h-32 bg-gray-300">Obstacle</div>

Visual: default, glow, neon, fire, electric, shadow, rainbow, emerald, rose, amber, violet, cyan, lime, pink, indigo, teal, orange, slate Size: xs, sm, default, lg, xl, 2xl, 3xl, … 9xl

<CurvedArrow startElement={aRef} endElement={bRef} variant="neon" size="lg" />

<div className="relative">
  <div className="z-1">Under Arrow</div>
  <CurvedArrow startElement={aRef} endElement={bRef} />
  <div className="z-5">Over Arrow</div>
</div>

• UNDER layer → role="img" + aria-label
• OVER layer → aria-hidden="true"

• Tracks geometry via ResizeObserver + MutationObserver
• Batches updates with requestAnimationFrame
• Ignores sub-pixel geometry changes (<0.5px)

• Future curve types: spiral, loop, heart, infinity
• Obstacle avoidance uses heuristic routing
• Parent container must be relatively positioned

• React
• class-variance-authority
• Tailwind CSS (recommended)

Contributions are welcome! Submit issues or PRs that maintain performance, accessibility, and z-index consistency.

Released under the MIT License © 2025 aliezzahn