Shadcn.io is not affiliated with official shadcn/ui
Animated Beam
Animated SVG beam connecting UI elements with flowing gradient for React
Those glowing lines you see in architecture diagrams showing data flowing between services? This is that. Draw animated beams between any two elements—a gradient pulses along the path like energy moving through a circuit. Curved or straight, you control the shape. Beams auto-recalculate on resize so they stay connected when layouts shift. Perfect for integration demos, org charts, feature connections, or any time you need to visually say "this thing talks to that thing."
Scroll to load preview
Installation
Related Components
Background Beams
Decorative beam lines
Beams With Collision
Exploding beams
3D Pin
Connected pin cards
Animated Tooltip
Hovering content
FAQ
Was this page helpful?
Sign in to leave feedback.