Animated Beam
Animated SVG beam connecting UI elements with flowing gradient for React
Animated Beam preview
Scroll to load preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this component for you — no copy-paste, no CLI:
use shadcnio to install the animated-beam component into my projectRelated 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.