New: Head layering, obstacle routing, 25+ presets
Design dynamic curved arrows for React
Connect any two elements with beautiful, animated paths. Control curve shape, routing, layering, arrowheads, gradients, and responsive behavior in real-time.
Start
End
25+
Curve Types
20+
Arrow Heads
4.9
Developer Rating
0 deps
No extra packages
Smart Routing
Route around obstacles or pick shortest paths with smooth transitions and responsive updates.
Layering Control
Choose whether heads and lines render above or below elements to avoid overlap artifacts.
Beautiful Effects
Neon, glow, rainbow, and custom gradients with adjustable stroke, size, and animation.
Build interactive flows in minutes
Start in the Playground and export ready-to-use code with our advanced presets.
Interactive Demo
See It In Action
Explore a growing library of presets. Click a card to preview and copy code.
Controls
Play, pause or rotate presets
Smooth Glow
Gradient bezier with glow
Start
End
Code Example
Demo.tsxTSX
1<CurvedArrow
2 startElement={startRef}
3 endElement={endRef}
4 curveType="smooth"
5 variant="glow"
6 size="lg"
7 animated={true}
8 gradientFrom="#3b82f6"
9 gradientTo="#8b5cf6"
10/>