Dev Design LibraryImage Components
Dev Design Library indexes 152 image components from 46 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. Image components belong to the Media group.
Showing 120 of 152, a mix from every library. Open a library to see all of its components.
Image List ItemMUI / Material UI · React
Refine FrameReact Bits · ReactReserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift…
ImageChakra UI · ReactUsed to display images
LensMagic UI · ReactA interactive component that enables zooming into images, videos and other elements.
Comp 554Origin UI · React
Image Open Tilttransitions.dev · HTML/CSS- Img FxLibraries.dev · ReactAnimated WebGL image-generation / loader effect for React cards
16:9 widescreen aspect ratioReUI · React16:9 widescreen aspect ratio
Pdf Imagepdfcn · ReactPdf Image PDF component (forme)
ImageAI Elements · ReactDisplays AI-generated images from the AI SDK.
ImageLobe UI · ReactImage is an enhanced image component with a self-contained zoom-and-pan preview viewer, custom actions, and various…
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…
Before AfterKinetics · HTML/CSSDrag the handle to wipe between layers
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.
Photo CropperSwiftPieces · SwiftUIA crop step for profile photos and posts with pinch, pan and aspect presets, rendering the crop off the main thread at…
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
Image compareArc Library · ReactDrag a divider across two images to see what changed.
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 TrailAtelier UI · React
Compare SliderHalaska UI · React
Progress ImagePin UI · React
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.
Image List Item BarMUI / Material UI · React
Comp 555Origin UI · React
4:3 standard aspect ratioReUI · React4:3 standard aspect ratio
Pdf Imagepdfcn · ReactPdf Image PDF component (takumi)
Image SelectLobe UI · ReactImageSelect allows users to choose an option from a list of images. It's ideal for visual selection interfaces where…
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
Photo ViewerSwiftPieces · SwiftUIA full-screen photo viewer with anchored pinch zoom, momentum panning, paging and drag to dismiss under glass controls.
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.
Webgl ImageAtelier UI · React
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…
Libraries with image components
Related categories
- React Image Components
- Tailwind CSS Image Components
- Animated Image Components
- Media Components
- Icon Components
- Gallery Components
- Logo Components
- Illustration Components
- Mockup Components
- Animated Icon Components
- Audio Visualizer Components
- Scene 3D Components
- Video Player Components
- QR Code Components
- Icon Set Components
- Audio Player Components
- Image Zoom Components
- Image Compare Components
- Model Viewer Components