Dev Design LibraryTailwind CSS Media Components
Dev Design Library indexes 576 Tailwind CSS media components from 58 open-source UI libraries, with the most coming from Pixel Perfect, ReUI, Amicro Micro Transitions, OpenSourceUI and Cojeev 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 576, a mix from every library. Open a library to see all of its components.
MockupdaisyUI · CSS (Tailwind)
AndroidMagic UI · ReactA mockup of an Android device.
IconReact Spectrum · ReactSpectrum icons are clear, minimal, and consistent across platforms. They follow the focused and rational principles of…
Comp 266Origin UI · React
Bg MediaCult UI · ReactBackground media component with video/image support and overlay effects- Img FxLibraries.dev · ReactAnimated WebGL image-generation / loader effect for React cards
16:9 widescreen aspect ratioReUI · React16:9 widescreen aspect ratio
App Icon LoadAmicro Micro Transitions · ReactApp Icon Load loading animation.
Audio PlayerAI Elements · ReactA composable audio player component built on media-chrome, with shadcn styling and flexible controls.
AI VoiceKokonut UI · ReactVoice input with a scrolling waveform, then a take you can play back, discard or send.
Text Icon CursorCursify · React
Play Button IconUntitled UI React · ReactRounded play icon with blurred background and a filled triangle in the middle.
Infinite MasonrybeUI · ReactResponsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.
Folder ComponentRare UI · ReactAn animated folder whose cards fan out on hover and lift open on click, with a 3D-tilted flap. Supports color and size…
Disclose ImageSpectrum UI · ReactAn image reveal component with animated sliding door panels.
QR CodeSpell UI · ReactQR code generator with rounded finder patterns and dot-style data modules.
Circular GalleryVengeance UI · ReactRelaxing 3D ring of images with drag-spin, parallax tilt, and center preview
File ThumbnailFluid Functionalism · ReactRead-only square preview of a File. Images render via object-cover; PDFs render their first page via pdfjs; a spinner…
FigmaLaunch UI · React
Qr CodePanel UI · React NativeA string a camera can read — framed, titled, or folded away behind a button.
Accordion-05 - MediaShadcn Space · ReactAccordion with icon trigger, description, and an image revealed on open
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…
3D Bookuselayouts · ReactAn interactive 3D book component with page flip animations.
BrandBoardUI · React
Circuit BoardComponentry · ReactAnimated circuit board visualization with nodes and connections.
Comparator Onecnblocks · SvelteBefore/after image comparison slider block
GlobeAnimations (Svelte) · SvelteAn autorotating, interactive, and highly performant globe made using WebGL.
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.
Art GalleryObsidianUI · ReactA lensed photo grid you can drag through, with barrel distortion and infinite tiled studies.
Gemini SparkleNotra · ReactGemini's three-dot mark that bounces and folds into a triangle.
Animated PathGreatUI · ReactSVG path that draws itself from start to end.
Gallery 01Oxbow UI · Astro
Bars ThemeNexvyn UI · ReactA traveling-wave bars visualization with 5 vertical bars sharing a sine-wave frequency, evenly phase-shifted left to…
Audio Playeraudiocn · ReactA composable audio player: transport, seek bar with buffering, time, volume, playback rate, loop and keyboard shortcuts.
FrameShark UI · ReactBordered box for grouping related content.
Perspective Flip DeckRewamp UI · ReactExact recreation of Recording 2026-09-15 154736.mp4: 3D isometric perspective fanned card deck. When cycling, the…
ASCII Logo23rd.dev · ReactInteractive ASCII wordmark: glyphs shove away from the cursor, then click-cycle through scatter, gravity drop, and…
Floating ViewerSona UI · ReactAn in-page media surface that automatically or manually detaches, stays within viewport bounds, snaps to a corner, and…
Audio PlayerWatermelon UI · React
Hero Threesv-efferd · SvelteA modern hero layout with mega-nav header, device mockup spotlight, and compact logo grid.
Glass Iconglasscn · ReactA circular glass chip that wraps any icon, iOS-control-center style. Preset sizes scale the circle and icon together…
Arrow CalloutUI Lab · ReactA handwritten note whose arrow draws itself to whatever it points at.
Video playerHextaUI · ReactA video player with a scrubbable seek bar, auto-hiding controls, keyboard shortcuts, speed, picture in picture and…
Audio Scrub PlayerLocalMode · ReactA composable scrubbable audio player for local Blob/object-URL audio (Kokoro TTS output or recordings) — play/pause, a…
Accordion GalleryCojeev UI · ReactA selected image panel opens to reveal its label, story and action.
Image overlayFLX UI · ReactText and a CTA over a gradient-darkened cover image.
3D MarqueeVelora UI · ReactA tilted 3D grid of images whose columns scroll up and down in an endless loop.
Qr Code Signinsv-particles · Svelte
AnimojiSpaceUI · ReactRenders every Unicode emoji in a string as an animated image sized to the surrounding text.
Image Density GridSkecher UI · ReactA percentage-controlled image grid with animated density changes, soft focus, and optional controls.
Arrow RightSora UI · ReactAnimated right arrow that nudges forward and redraws its stroke on hover using a pure CSS stroke-dash animation.
Glass LensOpaline · ReactDraggable magnifying lens that bends whatever is beneath it.
Integration VisualFibo · ReactA hub and the tools wired into it, with pulses along the routes.
AI Voice 01ReactFrame · ReactA voice-assistant pill with a canvas audio-reactive visualizer, idle/listening/speaking states, a glowing edge ring…
3d GlobeAceternity UI · React
Qr Codeark-cn · ReactA shadcn-style qr code component built with Ark UI primitives.
GlobeMagic UI · ReactAn autorotating, interactive, and highly performant globe made using WebGL.
Illustrated MessageReact Spectrum · ReactAn IllustratedMessage displays an illustration and a message, usually for an empty state or an error page.
Comp 554Origin UI · React
File IconsCult UI · ReactIcon set for file types and languages- Voice GlowLibraries.dev · ReactSound-reactive glow for React — a centered, colorful beam along the bottom edge that rises and blooms with voice…
4:3 standard aspect ratioReUI · React4:3 standard aspect ratio
Apple EqualizerAmicro Micro Transitions · ReactApple Equalizer loading animation.
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…
CarouselUntitled UI React · React
Preview RailbeUI · ReactCodex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination…
Voice NoteRare UI · ReactA voice message bar with a scrubbable waveform and a play control.
Face RatingSpectrum UI · ReactA five-level feedback rating where one large SVG face morphs its mouth, eyes and color between moods as you hover and…
Image CollageVengeance UI · ReactInteractive scattered image collage toggle
Sidebar Workspace HeaderFluid Functionalism · ReactWorkspace brand row for a sidebar header: 20px tile on the rows' leading axis, name pinned to the 32px text axis…
GithubLaunch UI · React
Aspect Ratio 04 - Video ThumbnailShadcn Space · ReactA 16:9 video thumbnail with a play button overlay and duration badge.
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…
AccordionOSuselayouts · ReactInteractive accordion showcase with animated content, image transitions, hover effects, keyboard navigation, autoplay…
IconsBoardUI · React
Collection SurferComponentry · ReactSmooth surfing interaction for browsing collections.
Hero Eightcnblocks · SvelteHero with video background and overlay
Hero Video DialogAnimations (Svelte) · SvelteA video dialog component with animated entrance effects, thumbnail support, and customizable animation styles.
Skeumorphic Music CardObsidianUI · React
OpenCode LogoNotra · ReactThe block-letter OpenCode wordmark drawn on a cell grid and themed with tokens.
Ascii ImageGreatUI · React
Gallery 02Oxbow UI · Astro
Laptop MockupNexvyn UI · ReactA laptop device-frame illustration for showcasing app screens.
Bar Visualizeraudiocn · ReactA row of bars driven by frequency bands, with idle, loading and mirrored modes. Bars paint without re-rendering React.
Image CropperShark UI · ReactCrop and transform images.
Editorial 3 D Orbit CarouselRewamp UI · React
Logo Burst23rd.dev · ReactHair-line tentacles explode from the center, then keep a slow inhale. Follows light and dark.
LightboxSona UI · ReactAn accessible image preview that expands from its thumbnail and returns to the same spatial origin when dismissed.
Audio Player With WaveformWatermelon UI · React
Hero Twosv-efferd · SvelteA framed product hero with a floating screen, structured header, and bordered logo section.
Balance ScaleUI Lab · ReactWeighs your pros against your cons on a balance that tips and slowly settles.
Streaming Speech PanelLocalMode · ReactA streaming-TTS status surface: active state (WaveformActivityBars + spinner, synthesizing/playing label…
Animated iconCojeev UI · ReactReplayable micro-interactions for the full Cojeev icon library, with semantic motion families and optional visual…
Content 11FLX UI · ReactA billing overview split with a dashboard preview card and two feature highlights, built for the app-shell preset.
Browser MockupVelora UI · ReactBrowser window frame for product screenshots.
CloudSpaceUI · ReactVolumetric cloud material. Color the sky, sun, and shadows, then fly the camera with mouse or touch.
Image GlideSkecher UI · ReactAn image viewer with pointer depth, soft image transitions, and a compact thumbnail rail.
ChevronsSora UI · ReactAnimated double up-chevron that cross-fades between the two carets on trigger.
Glass PlayerOpaline · ReactNow-playing widget with scrubber, transport controls and volume.
Map PinFibo · ReactA pin for a point on a map, with a preview that opens on click or tap.
AI Voice 05ReactFrame · ReactA portrait voice-assistant card with a canvas audio-reactive curve visualizer, a mic button that grows on tap…
3d MarqueeAceternity UI · React
Swapark-cn · ReactA shadcn-style swap component built with Ark UI primitives.
Hero Video DialogMagic UI · ReactA hero video dialog component.- Card ViewReact Spectrum · ReactTODO: Add description of component here.
Comp 555Origin UI · React
Gateway Endpoint IllustrationCult UI · ReactIllustration for gateway endpoint concepts- Voice RingLibraries.dev · ReactVoice-reactive ring of light for React: a glassy spectrum that bends with the voice, takes the colour of its emotion…
1:1 square aspect ratioReUI · React1:1 square aspect ratio
Apple Icon MorphAmicro Micro Transitions · ReactApple Icon Morph loading animation.
Shape HeroKokonut UI · ReactA landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.
Dot IconUntitled UI React · React
Image PreviewSpectrum UI · Reactcomponent for the Image Preview
Image Reveal ListVengeance UI · ReactHover-based image reveal tooltip list
Hero SectionLaunch UI · React
Autocomplete-06 - With IconShadcn Space · ReactAutocomplete for selecting a project type with unique icons, selected icon shown in input, and spring-animated list…
Libraries with Tailwind CSS media components
Related categories
- Media Components
- React Media Components
- Svelte Media Components
- Animated Media Components
- shadcn/ui Media Components
- Tailwind CSS Image 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