Dev Design LibraryReact Connector Components
Dev Design Library indexes 12 React connector components from 7 open-source UI libraries, with the most coming from Shadcn Space, AI Elements, Magic UI, GreatUI and Velora UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. 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
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
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…