Dev Design LibraryTailwind CSS Image Components
Dev Design Library indexes 135 Tailwind CSS image components from 34 open-source UI libraries, with the most coming from Pixel Perfect, Origin UI, ReUI, OpenSourceUI and Aceternity 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. Image components belong to the Media group.
Showing 120 of 135, a mix from every library. Open a library to see all of its components.
LensMagic UI · ReactA interactive component that enables zooming into images, videos and other elements.
Comp 554Origin UI · React- Img FxLibraries.dev · ReactAnimated WebGL image-generation / loader effect for React cards
16:9 widescreen aspect ratioReUI · React16:9 widescreen aspect ratio
ImageAI Elements · ReactDisplays AI-generated images from the AI SDK.
Photo StraightenKokonut UI · ReactLevel a crooked photo on a ruler you drag or flick. The crop grows to hide the corners, and a grid shows while you…
Disclose ImageSpectrum UI · ReactAn image reveal component with animated sliding door panels.
Image Reveal ListVengeance UI · ReactHover-based image reveal tooltip list
File ThumbnailFluid Functionalism · ReactRead-only square preview of a File. Images render via object-cover; PDFs render their first page via pdfjs; a spinner…
ScreenshotLaunch UI · React
Product Category 02 - Image BasedShadcn Space · ReactA product category section built with image-driven cards and filters, enabling faster discovery through visuals and…
Before AfterPixel Perfect · ReactDrag the handle to wipe between two images with a liquid seam.
Hard Shadow Polaroid FrameOpenSourceUI · ReactPolaroid frame with a crisp inner border, thick caption chin, and hard offset shadow — pass caption and any image or…
AccordionOSuselayouts · ReactInteractive accordion showcase with animated content, image transitions, hover effects, keyboard navigation, autoplay…
Layered StackComponentry · ReactA stack of layered cards that interact with mouse hover.
Comparator Onecnblocks · SvelteBefore/after image comparison slider block
LensAnimations (Svelte) · SvelteAn interactive component that enables zooming into images, videos and other elements.
ImageAI Elements (Svelte) · SvelteA data-URL image component with typed props for AI-generated image payloads.
Image SplitBadtz UI · ReactThis component provides a dynamic and visually captivating way to display images split into multiple sections.
Ascii ImageGreatUI · React
Image CropperShark UI · ReactCrop and transform images.
LightboxSona UI · ReactAn accessible image preview that expands from its thumbnail and returns to the same spatial origin when dismissed.
BookWatermelon UI · React
Compare SliderUI Lab · ReactDrag the line to see what polish actually changes.
Background Remover BlockLocalMode · ReactRemove an image's background entirely on-device: SegFormer (Xenova/segformer-b0-finetuned-ade-512-512, ~15MB) segments…
Image MaskingCojeev UI · ReactCaller images are framed by original Cojeev silhouettes using CSS masks or SVG clip paths.
Image overlayFLX UI · ReactText and a CTA over a gradient-darkened cover image.
Compare SliderVelora UI · ReactBefore/after wipe with a keyboard-accessible divider.
Image DarkSpaceUI · ReactAn adaptive image component that dynamically switches between light and dark mode sources using standard HTML img…
Infinite Scrolling ImagesSora UI · ReactAn infinite card stack that advances with wheel, touch, or keyboard input using spring-based Motion transitions.
Glass LensOpaline · ReactDraggable magnifying lens that bends whatever is beneath it.
Compare SliderReactFrame · ReactA theme-aware before/after image comparison slider with horizontal or vertical drag direction, keyboard support, and…
CompareAceternity UI · React
Zoom Imageark-cn · ReactA shadcn-style zoom image component built with Ark UI primitives.
Comp 555Origin UI · React
4:3 standard aspect ratioReUI · React4:3 standard aspect ratio
Image PreviewSpectrum UI · Reactcomponent for the Image Preview
Image TrailVengeance UI · ReactCursor-following image trail effect
Bend Image RevealPixel Perfect · ReactA pixel-art frame that flies in and warps with an air-friction bend, deformed on a WebGL plane by a GSAP-driven vertex…
Sticky Note Polaroid FrameOpenSourceUI · ReactPolaroid-style frame with a paper-clipped sticky note overlay — pass noteHeader, noteBody, noteFooter, and any image…
Magnified Bentouselayouts · ReactA bento card component with a draggable magnifying lens effect over scrolling chips.
Scroll Split CardComponentry · ReactA scroll-driven interactive card that splits into three panels and flips.
Fancy Media Between TextAnimations (Svelte) · Svelte
Pixel To Ascii ImageGreatUI · React
Image HotspotsUI Lab · ReactDraws a leader line to one label card that travels between a watch's features, never covering the product.
Image Enhancer BlockLocalMode · ReactUpscale and restore photos with Swin2SR super-resolution running fully in the browser — a 2x lightweight default…
Direction Aware HoverVelora UI · ReactOverlay enters from the edge the cursor actually crossed.
Dot Image SliderReactFrame · ReactA before/after image reveal, a luminance-mapped halftone dot rendering on one side, the real photo on the other…
Direction Aware HoverAceternity UI · React
Comp 556Origin UI · React
1:1 square aspect ratioReUI · React1:1 square aspect ratio
Fluid ImagePixel Perfect · ReactA real-time GPU fluid simulation — move your cursor to flow one image into another.
Circle Cut FrameOpenSourceUI · React
Scroll Split Cardsuselayouts · ReactOne photograph that splits into three panels as you scroll, then flips to copy.
Fancy Parallax FloatingAnimations (Svelte) · Svelte
Object Detector BlockLocalMode · ReactOne-shot DETR (Xenova/detr-resnet-50) object detection on an uploaded image, the bundled sample, or a webcam-captured…
LensVelora UI · ReactCircular magnifier that follows the pointer or arrow keys to zoom into an image.
Image CropperReactFrame · ReactAn image cropper with a draggable, resizable crop box, aspect presets or a circle mask for avatars, keyboard nudging…
Images BadgeAceternity UI · React
Comp 557Origin UI · React
21:9 ultrawide aspect ratioReUI · React21:9 ultrawide aspect ratio
Gravity Image TrailPixel Perfect · ReactA GSAP image trail where images cascade from the cursor, fall, and bounce off the bottom edge.
Glass Overlay Image CardOpenSourceUI · React
Before / After Image ViewerLocalMode · ReactCompare an original image with a transformed result — a two-panel grid with checkerboard transparency (shipped inline)…
LensAceternity UI · React
Comp 558Origin UI · React
9:16 portrait aspect ratioReUI · React9:16 portrait aspect ratio
Image Hover AnimationPixel Perfect · ReactAn image hover animation with scaling and opacity effects.
Polaroid Image CardOpenSourceUI · React
Bounding Box OverlayLocalMode · ReactColor-coded detection boxes (with a companion DetectionLabelLegend) positioned over an image as percentage offsets…
Link PreviewAceternity UI · React
Comp 559Origin UI · React
3:2 classic photography aspect ratioReUI · React3:2 classic photography aspect ratio
Img AnaglyphPixel Perfect · ReactRed/cyan stereo split driven by brightness-as-depth — grab your 3D glasses.
Slow Living Polaroid CardOpenSourceUI · React
Comp 560Origin UI · React
4:5 social media portrait aspect ratioReUI · React4:5 social media portrait aspect ratio
Img Ascii ArtPixel Perfect · ReactRebuilds the image from terminal glyphs whose density tracks brightness.
Transform Box FrameOpenSourceUI · React
Comp 561Origin UI · React
16:10 computer monitor aspect ratioReUI · React16:10 computer monitor aspect ratio
Img Ballpoint DrawingPixel Perfect · ReactA ballpoint-pen cross-hatch rendering — strokes follow the image's form on grainy paper with a vignette. Adapted…
Transform Plus FrameOpenSourceUI · React
Comp 562Origin UI · React
Full card with image and shadow fade effectReUI · ReactFull card with image and shadow fade effect
Img Burn DissolvePixel Perfect · ReactHover and the first image burns away along a glowing ember edge, revealing the next through the noise.
Comp 563Origin UI · React
Card with imageReUI · ReactCard with image
Img Checker FlipPixel Perfect · ReactHover and the image tiles into a checkerboard whose squares flip over, staggered, to the next image.
Comp 564Origin UI · React
Card with image scale hover effectReUI · ReactCard with image scale hover effect
Img Chromatic AberrationPixel Perfect · ReactRed and blue channels drift apart toward the edges with a slow pulse.
CropperOrigin UI · React
Card with full imageReUI · ReactCard with full image
Img Comic CelPixel Perfect · ReactPosterised flat colours with bold inked outlines — cel-shaded comic look.
Img Crt ScanlinesPixel Perfect · ReactCurved tube, scanlines, RGB fringe and a rolling bar — vintage television.
Img CrystallizePixel Perfect · ReactShatters the image into flat Voronoi cells with dark stained-glass leading.
Img Dot Matrix ScatterPixel Perfect · ReactAn LED-style dot grid of the image — move your cursor to scatter the dots into a dispersing cloud.
Img DuotonePixel Perfect · ReactMaps brightness onto a two-colour gradient that shifts through the spectrum.
Img Edge SketchPixel Perfect · ReactSobel edge detection lights up the outlines in their own colour on black.
Img EngravingPixel Perfect · ReactRenders the image as inked woodcut hatch-lines on warm paper.
Img GameboyPixel Perfect · ReactFour-shade DMG green palette with ordered dithering and chunky pixels.
Img Glass ShatterPixel Perfect · ReactThe image is cracked into Voronoi glass shards — move your cursor to blow them outward, leaving dark leading between…
Img GlitchPixel Perfect · ReactRandom horizontal slices tear and shift with bursts of RGB noise.
Img Hex MosaicPixel Perfect · ReactPixelates the image onto a honeycomb grid of hexagons.
Img Ink BleedPixel Perfect · ReactColour blooms outward from your cursor like ink dropped into water.
Img KaleidoscopePixel Perfect · ReactFolds the image into six-fold mirrored symmetry that slowly rotates.
Img Led Dot MatrixPixel Perfect · ReactRebuilds the image from a grid of glowing round LEDs on a black panel.
Img Low PolyPixel Perfect · ReactFlat-shades the image across a grid split into triangles, geometric-art style.
Img Magnifier LensPixel Perfect · ReactA fish-eye loupe follows your cursor, zooming the image right beneath it.
Img Oil PaintPixel Perfect · ReactKuwahara filtering smears the image into soft painterly brush strokes.
Img Pixel DissolvePixel Perfect · ReactThe image materialises from chunky mosaic blocks into full resolution.
Img Pixel DistortionPixel Perfect · ReactMove your cursor to crunch the image into chunky pixel blocks that jitter, distort and RGB-split around the pointer.
Img Pixel Rise RevealPixel Perfect · ReactHover and a ragged wall of pixels climbs from the bottom, dissolving the old image block by block as the new one rises…
Img PosterizePixel Perfect · ReactFlattens the image into a handful of colour bands, screen-print style.
Img Ripple RevealPixel Perfect · ReactHover to send a rippling ring out from the centre, warping the first image aside as the next floods in.
Img Shery Cyber SquaresPixel Perfect · ReactRetro cyber squares pulse across the image and brighten around your cursor. Adapted from Shery.js (style 7), MIT…
Img Shery LiquidPixel Perfect · ReactA mesmerising simplex-noise liquid warp drifting across the image. Adapted from Shery.js (style 1), MIT — Sheryians…
Img Shery Liquid CursorPixel Perfect · ReactA flowing liquid distortion that bends around your cursor. Adapted from Shery.js (style 5), MIT — Sheryians Coding…
Img Shery PerlinPixel Perfect · ReactA pulsing Perlin-noise displacement that breathes the image in and out. Adapted from Shery.js (style 6), MIT…
Libraries with Tailwind CSS image components
Related categories
- Image Components
- React Image Components
- Animated Image Components
- Tailwind CSS Media Components
- Tailwind CSS Icon Components
- Tailwind CSS Gallery Components
- Tailwind CSS Illustration Components
- Tailwind CSS Mockup Components
- Tailwind CSS Animated Icon Components
- Tailwind CSS Audio Visualizer Components
- Tailwind CSS Logo Components
- Tailwind CSS Scene 3D Components
- Tailwind CSS Video Player Components
- Tailwind CSS QR Code Components
- Tailwind CSS Icon Set Components
- Tailwind CSS Image Compare Components