Dev Design LibraryTailwind CSS Effect Components
Dev Design Library indexes 452 Tailwind CSS effect components from 46 open-source UI libraries, with the most coming from Pixel Perfect, Cojeev UI, Amicro Micro Transitions, Animations (Svelte) 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 styles its components with Tailwind CSS utility classes.
Showing 120 of 452, a mix from every library. Open a library to see all of its components.
Animated BeamMagic UI · ReactAn animated beam of light which travels along a path. Useful for showcasing the integration features of a website.
Distorted GlassCult UI · ReactA glass morphism effect component using SVG filters with fractal noise to create visual transitions between sections- Border BeamLibraries.dev · ReactAnimated border beam effect for React
Card HoverAmicro Micro Transitions · ReactDynamic floating card effect on hover.
ConnectionAI Elements · ReactA custom connection line component for React Flow-based canvases with animated bezier curve styling.
Mouse Effect CardKokonut UI · ReactInteractive card with an animated dot pattern that repels away from the cursor, powered by React, Tailwind CSS and…
Magnetic CursorCursify · React
LiquidbeUI · ReactGooey container (Liquid and LiquidItem): items placed inside merge into one liquid silhouette through an SVG filter.
Grid RevealRare UI · ReactA loading state for AI images that turns into the real picture when it arrives.
Beam CardSpectrum UI · ReactA card wrapped in an animated border beam, traveling or breathing, in four color palettes.
Flow ButtonSpell UI · ReactA button with animated flowing dashed border on hover.
Ascii Glitch RippleVengeance UI · ReactDynamic character-scramble wave ripple hover effect
BeamLaunch UI · React
MarqueePanel UI · React NativeContent that travels across its container on a loop.
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
Aperture Mask RevealPixel Perfect · ReactA camera-aperture mask reveal — six shutter blades twist open around the center, dilating a hexagonal iris cut from an…
Ascii EffectComponentry · ReactRender images as responsive ASCII artwork with image, flow, and glitch variations.
Card Decoratorcnblocks · SvelteDecorative card component with visual effects
Animated BeamAnimations (Svelte) · SvelteA component for creating animated beam effects between two elements with customizable gradients and paths.
3D WrapperBadtz UI · ReactThis component transforms any content into an immersive, interactive 3D experience. It tracks cursor movements to…
Draggable MarqueeObsidianUI · ReactA continuous image marquee with drag momentum and a seamless looping track.
Animated PathGreatUI · ReactSVG path that draws itself from start to end.
Social Proof Logo marqueeNexvyn UI · ReactThe tools a product is built with, drifting in a slow seamless marquee with soft edges.
Stack RippleForge UI · ReactAnimated stacked notification cards ripple open with smooth transitions, showing messages, signups, and billing…
MarqueeShark UI · ReactScrolls items in a horizontal container.
Fluid Morph OrbRewamp UI · ReactAnimated orb that continuously changes shape like a fluid, shader based.
HighlightButtonEvil Buttons · ReactA button with a cursor spotlight, a border that lights up near the pointer, and a ripple from wherever you click.
ASCII Fluid23rd.dev · ReactMouse-trail WebGL fluid background quantized to a clean ASCII brightness ramp - zero deps, theme-aware.
Avatar ShowcaseSona UI · ReactA recording-friendly avatar strip with count-aware pacing, deterministic sampling, staggered lanes, and reduced-motion…
LiquidWatermelon UI · ReactLiquid button whose fill colour flows in on hover.
Hero Onesv-efferd · SvelteA full hero composition with sticky header, editorial spotlight, and a marquee trust band.
Liquid Badgeglasscn · ReactA liquid-glass badge wrapper that keeps the base badge fill and applies the effect to the border.
Confetti ButtonUI Lab · ReactA click pops confetti; hold it and the fuse burns until the whole thing blows.
Assembly partCojeev UI · ReactA persistent native component moving between a floating organism and its measured layout.
Subscribe Shine ButtonMicroKit · ReactA dark subscribe pill with a rotating highlight that traces its edge on hover.
Carousel 01FLX UI · ReactAuto-scroll carousel that pauses on item hover and reveals title.
3D CardVelora UI · ReactPerspective card that turns toward the pointer while its layers lift to different depths.
ConnectorMetal UI · React + SwiftUIThe look around ink that joins two blocks: a green halo and end dots on hover (solid attached, hollow free), end…
BloopSpaceUI · ReactCompact assistant orb with listen, think, and speak states, voice palettes, and audio input.
Animated BookSkecher UI · ReactA reusable 3D book preview that opens on hover or focus and supports controlled state, keyboard input, and reduced…
Cursor Trail RevealSora UI · ReactDesktop cursor trail that reveals staggered image strips with clip-path wipes as the pointer moves.
Hero 01D2Studio UI · ReactStartup mentorship landing hero with a headline, call to action and mentor avatar group.
Glass LensOpaline · ReactDraggable magnifying lens that bends whatever is beneath it.
Bubble CursorReactFrame · ReactA liquid-glass bubble that follows the pointer across the whole page, rendered with a raymarched WebGL2 metaball trail…
3d CardAceternity UI · React
Image Cropperark-cn · ReactA shadcn-style image cropper component built with Ark UI primitives.
BacklightMagic UI · ReactA backlight glow effect for videos, images, and SVGs.
Dither ImageCult UI · ReactCompound Next.js image figure with CSS Bayer dither via dither-plugin, partial reveal overlays, and typed tuning props- Img FxLibraries.dev · ReactAnimated WebGL image-generation / loader effect for React cards
Cursor TrailAmicro Micro Transitions · ReactCustom cursor with particle/dots trail.
EdgeAI Elements · ReactCustomizable edge components for React Flow canvases with animated and temporary states.
Spotlight CardsKokonut UI · ReactFeature card grid with ambient aurora glow, magnetic 3D tilt and focus dimming on hover, built with React, Tailwind…
Neural GlowCursify · React
MagneticbeUI · ReactButton composed with the Magnetic wrapper for cursor-attracted pull.
Beam Search BarSpectrum UI · ReactA search bar whose bottom edge lights up with a traveling beam while it has focus.
MarqueeSpell UI · ReactInfinite scrolling marquee component with customizable speed and direction.
Cursor CardVengeance UI · ReactInline text link with cursor tracking preview card
GlowLaunch UI · React
Web Tilt CardPanel UI · React Native
Animated Beam 02 - PipelineShadcn Space · ReactLeft to right pipeline connecting Figma, Claude, and output nodes with animated light beams
Bend Mouse FollowerPixel Perfect · ReactA pixel-art frame that smoothly chases the cursor and warps with an air-friction bend on a WebGL plane.
Closing PlasmaComponentry · ReactPlasma field tailored for footer and CTA sections with premium atmospheric motion.
Hero Ninecnblocks · SvelteHero with animated background elements
Blur FadeAnimations (Svelte) · SvelteA component that animates content with blur and fade effects, supporting directional movement and intersection…
Border BeamBadtz UI · ReactDisplays an animated border effect with a glowing beam around the content that adapts to the size of the container.
Liquid MetalObsidianUI · ReactShader background that looks like flowing liquid metal or chrome.
Color Wipe Page TransitionGreatUI · ReactPage transition where a block of colour wipes across the screen between routes.
Social Proof Testimonial marqueeNexvyn UI · ReactTwo rows of testimonial cards drifting in opposite directions, pausable.
SwapShark UI · ReactAnimate between two visual states with smooth transitions.
Halftone Dot CursorRewamp UI · ReactRecreation of Recording 2026-09-17 213845.mp4: An interactive halftone dot matrix cursor that expands and blooms into…
Folio23rd.dev · ReactThe whole page leans back in perspective while you scroll, blurs, then springs flat when you stop.
Image TrailSona UI · ReactSpawns a trail of images that follow the cursor across a scoped area, with multiple appearance styles.
CursorWatermelon UI · React
Logo Cloud Foursv-efferd · SvelteA marquee logo band with progressive edge blur and a layered track surface.
Liquid Glassglasscn · ReactLow-level refractive glass wrapper used by liquid-refract components.
Dot GridUI Lab · ReactDots swell and part around your cursor, and a click sends a shockwave.
Click SparkCojeev UI · ReactA finite spray of accent marks responds to a real activation.
Scroll 01FLX UI · ReactSticky media that changes as you scroll through text content.
3D MarqueeVelora UI · ReactA tilted 3D grid of images whose columns scroll up and down in an endless loop.
CloudSpaceUI · ReactVolumetric cloud material. Color the sky, sun, and shadows, then fly the camera with mouse or touch.
Magazine ScrollerSkecher UI · ReactA velocity-aware poster scroller with drag, wheel, spring, and progressive-blur treatments.
Progressive BlurSora UI · ReactA stacked-layer blur that ramps smoothly from sharp to fully blurred toward an edge, for fading content under a fixed…
Hero Section 01D2Studio UI · ReactPremium landing page hero with a serif accent headline, badge and mentor avatar group.
Liquid GlassOpaline · ReactThe primitive behind every glass component. Refracts the backdrop through an SVG displacement map, with a frosted…
Cosmic BackgroundReactFrame · ReactA canvas-powered animated night-sky background, rotating star rings, a drifting star field, a breathing cone light and…
3d MarqueeAceternity UI · React
Marqueeark-cn · ReactA shadcn-style marquee component built with Ark UI primitives.
Blur FadeMagic UI · ReactBlur fade in and out animation. Used to smoothly fade in and out content.
Edge BlurCult UI · ReactStacked backdrop-blur layers with a gradient mask for soft top or bottom screen edges- Liquid GooeyLibraries.dev · ReactLiquid UI effects for React: Morph (gooey merge, jelly shape change, contact dissolve), Move (liquid-rubber trails)…
Fade DownAmicro Micro Transitions · ReactFade with downward translation.
Ripple CursorCursify · React
MarqueebeUI · ReactInfinite horizontal or vertical scroll with pause-on-hover.
Disclose ImageSpectrum UI · ReactAn image reveal component with animated sliding door panels.
Perspective BookSpell UI · ReactA 3D book component with hover animation and customizable appearance.
Glow Border CardVengeance UI · ReactCard with animated glow border
Animated Beam 03 - Radial HubShadcn Space · ReactCentral ShadcnSpace node connected to surrounding nodes with animated light beams
Blinds Mask RevealPixel Perfect · ReactA venetian-blinds mask reveal — the image is hidden behind N slats cut from a repeating-linear-gradient CSS mask, then…
Dithered LogoComponentry · ReactAn interactive particle logo that turns image assets into a dithered canvas field with cursor ripples.
Integration Eightcnblocks · SvelteIntegration grid with animated connections
Border BeamAnimations (Svelte) · SvelteA component for creating animated border beam effects around elements with customizable gradients, duration, and…
Confetti ButtonBadtz UI · ReactA fun and interactive button that triggers a confetti explosion effect on click.
Click SparkObsidianUI · React
Curtain Page TransitionGreatUI · ReactPage transition where a curtain closes over the screen and opens on the next page.
Liquid Cursor GradientRewamp UI · ReactGradient background that flows like liquid following the pointer.
Phosphor Score23rd.dev · ReactVertical sheet music on a CRT phosphor: notes fall, bloom at the playhead, then exit in a flare.
MarqueeSona UI · ReactA scroll-velocity marquee with seamless loop math, eased hover pause, vertical/horizontal direction…
MarqueeWatermelon UI · React
Logo Cloud Threesv-efferd · SvelteA scrolling logo marquee with a soft edge mask and editorial rhythm.
Feature SpotlightUI Lab · ReactA camera zooms into the part of the product screenshot each feature describes as you scroll past it.
Contour fieldCojeev UI · ReactOriginal topographic lines on the inherited paper surface, with a bounded GPU renderer.
Animated BeamVelora UI · ReactDraws an animated connection between any two elements.
Frost BlurredSpaceUI · ReactStacked, masked backdrop-filter layers that frost content along an edge.
Sliding PanelSkecher UI · ReactA direction-aware panel transition with interruptible motion and reduced-motion fallbacks.
Text EffectSora UI · ReactPreset-driven staggered text reveals with blur, fade, slide, and scale animations, powered by Motion.
Hero Section 02D2Studio UI · ReactModern landing page hero section with badge, headline and avatar social proof.
Glare CardReactFrame · ReactA 3D tilt card that reacts to the cursor with animated conic-gradient reflections, diamond, holographic or aurora…
Ascii ArtAceternity UI · React
Presenceark-cn · ReactA shadcn-style presence utility built with Ark UI primitives.
Border BeamMagic UI · ReactAn animated beam of light which travels along the border of its container.
Libraries with Tailwind CSS effect components
Related categories
- Effect Components
- React Effect Components
- Svelte Effect Components
- Animated Effect Components
- shadcn/ui Effect Components
- Tailwind CSS Marquee Components
- Tailwind CSS Transition Components
- Tailwind CSS Cursor Effect Components
- Tailwind CSS Image Effect Components
- Tailwind CSS Mask Effect Components
- Tailwind CSS Reveal Wrapper Components
- Tailwind CSS Border Effect Components
- Tailwind CSS Glow Effect Components
- Tailwind CSS Tilt Effect Components
- Tailwind CSS Spotlight Effect Components
- Tailwind CSS Blur Overlay Components
- Tailwind CSS Confetti Components