Dev Design Libraryshadcn/ui Effect Components
Dev Design Library indexes 31 shadcn/ui effect components from 10 open-source UI libraries, with the most coming from Shadcn Space, Cojeev UI, D2Studio UI, Velora UI and Kokonut UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project.
ConfettiMagic UI · ReactConfetti animations are best used to delight your users when something special happens
Mouse Effect CardKokonut UI · ReactInteractive card with an animated dot pattern that repels away from the cursor, powered by React, Tailwind CSS and…
Button 04 - Heartbeat EffectShadcn Space · ReactHeartbeat Effect button component
Mouse Follower 2Pixel Perfect · ReactMouse follower image trail with pure DOM.
Liquid Badgeglasscn · ReactA liquid-glass badge wrapper that keeps the base badge fill and applies the effect to the border.
Assembly partCojeev UI · ReactA persistent native component moving between a floating organism and its measured layout.
Carousel 01FLX UI · ReactAuto-scroll carousel that pauses on item hover and reveals title.
Split CTA with product visualVelora UI · ReactTwo-column CTA card with a benefit list and a dashboard mock-up, traced by an animated border beam.
Hero 01D2Studio UI · ReactStartup mentorship landing hero with a headline, call to action and mentor avatar group.
Card SpotlightAceternity UI · React
Button 30 - ConfettiShadcn Space · ReactCelebration button that fires a confetti burst from the button and springs on click
Glass sculptureCojeev UI · ReactTranslucent geometry bends an original patterned studio through a softly lit glass surface.
Testimonial marqueeVelora UI · ReactTwo rows of review cards scrolling in opposite directions, with faded edges and pause on hover or focus.
Hero Section 01D2Studio UI · ReactPremium landing page hero with a serif accent headline, badge and mentor avatar group.
Dialog 08 - ConnectorsShadcn Space · ReactSearchable connectors dialog listing popular integrations with an add action for each — ideal for source/connector…
Glyph sculptureCojeev UI · ReactA real 3D surface drawn with glyphs, optional contour marks and your own local geometry.
Hero Section 02D2Studio UI · ReactModern landing page hero section with badge, headline and avatar social proof.
Number Ticker 06 - Social ProofShadcn Space · ReactA social proof counter with a counting member number and a stacked avatar cluster, perfect for signup counts…
Item adornmentCojeev UI · ReactColoured organic shapes for list items, with deterministic automatic selection and custom icon or no-icon options.
Radio Group 07 - Ripple EffectShadcn Space · ReactRadio Group component
Organism compositionCojeev UI · ReactSix useful compositions made from persistent Cojeev base components, with organic assembly and native controls.
Radio Group 08 - Hop EffectShadcn Space · ReactRadio Group component
Pigment fieldCojeev UI · ReactAn original GPU pigment wash using the current Cojeev palette.
Shine Border-01 - BasicShadcn Space · ReactShine Border component
PresenceCojeev UI · ReactMotionPresence keeps keyed children mounted for their exits. MotionSurface adds coordinated lifecycle states to an…
Shine Border 05 - Aurora GlowShadcn Space · ReactAn aurora glow shine border with a hue-rotating gradient ring and pulsing halo wrapping a simple centered card.
Shape studioCojeev UI · ReactOne shape studio: twelve compatible living contours, layered artwork and the complete original mask inventory. Compose…
Shine Border 06 - Focus FrameShadcn Space · ReactA camera focus-lock shine border with pulsing corner brackets instead of a continuous glowing ring, wrapping a simple…
Shape artworkCojeev UI · ReactAn original SVG silhouette with a cast shadow and a rotated rear outline. The same vector layers power its live…
Shine Border 07 - Marching DashesShadcn Space · ReactA marching dashes shine border with a crisp animated dashed outline continuously travelling around the edge, wrapping…
Switch-01 - Active effectShadcn Space · ReactSwitch with active effect component