Dev Design LibraryTailwind CSS Connector Components
Dev Design Library indexes 14 Tailwind CSS connector components from 8 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. Every library in this list styles its components with Tailwind CSS utility classes. Connector components belong to the Diagrams group.
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…