{"repo":"aliezzahn/dynamic-svg-arrow","free":true,"listed":false,"github":"https://github.com/aliezzahn/dynamic-svg-arrow","clone":"git clone https://github.com/aliezzahn/dynamic-svg-arrow.git","description":"Connect any two elements with beautiful, animated paths. Control curve shape, routing, layering, arrowheads, gradients, and responsive behavior in real-time.","language":"TypeScript","stars":35,"topics":["arrow","awesome-shadcn","dynamic","framer-motion","javascript","modernjs","nextjs","react","shadcn-ui","svg"],"license":"MIT","category":"ui-components","readme_excerpt":"🎯 CurvedArrow Component 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 . --- 🧩 Shadcn-Compatible 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 --- 📥 Installation Import the component: --- 🧱 Framework 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 --- ✨ Features - 🎯 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","default_branch":null,"files":null,"tree":[],"storefront":"/r/aliezzahn","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/aliezzahn/dynamic-svg-arrow/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}