Make your AI a shadcn expert

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 project

FAQ

Was this page helpful?

Sign in to leave feedback.