Dev Design LibraryConnector Components
Dev Design Library indexes 15 connector components from 9 open-source UI libraries, with the most coming from Shadcn Space, AI Elements, Animations (Svelte), Magic UI and GreatUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Connector components belong to the Diagrams group.
Step ConnectorMUI / Material UI · React
Animated BeamMagic UI · ReactAn animated beam of light which travels along a path. Useful for showcasing the integration features of a website.
ConnectionAI Elements · ReactA custom connection line component for React Flow-based canvases with animated bezier curve styling.
Animated Beam 01 - Hub and SpokeShadcn Space · ReactHub with the Shadcn Space logo linked to surrounding tool nodes by curved paths carrying travelling light beams
Integration Eightcnblocks · SvelteIntegration grid with animated connections
Animated BeamAnimations (Svelte) · SvelteA component for creating animated beam effects between two elements with customizable gradients and paths.
Animated PathGreatUI · ReactSVG path that draws itself from start to end.
Animated BeamVelora UI · ReactDraws an animated connection between any two elements.
ConnectorMetal UI · React + SwiftUIThe look around ink that joins two blocks: a green halo and end dots on hover (solid attached, hollow free), end…
EdgeAI Elements · ReactCustomizable edge components for React Flow canvases with animated and temporary states.
Animated Beam 02 - PipelineShadcn Space · ReactLeft to right pipeline connecting Figma, Claude, and output nodes with animated light beams
FlowAnimations (Svelte) · SvelteA group of components for building directed flow diagrams with nodes and connectors.
Animated Beam 03 - Radial HubShadcn Space · ReactCentral ShadcnSpace node connected to surrounding nodes with animated light beams
Animated Beam 04 - App FlowShadcn Space · ReactApp window node linked to Claude with an animated light beam
Dialog 08 - ConnectorsShadcn Space · ReactSearchable connectors dialog listing popular integrations with an add action for each — ideal for source/connector…