Shadcn.io is not affiliated with official shadcn/ui
Animated Beam
Animated SVG beam connecting UI elements with flowing gradient for React
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. Great for integration demos, org charts, or showing connections between features.
Animated Beam preview
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.