React media and upload components
Free React media components: file dropzone, image upload, galleries, lightbox, carousel, avatars, audio player and video player chrome.
14 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Media components handle the fiddly parts: drag and drop with clear states, previews while files upload, galleries that open into a lightbox and players with proper controls.
They are UI only, so you can upload to S3, UploadThing, Cloudinary or your own endpoint.
Components 10
Audio PlayeruiMinimal React audio player row with a play and pause toggle, title, subtitle and an accessible progress bar. Controlled, so it works with any audio source.npx shadcn@latest add ui.minidev.pro/r/audio-player.jsonAvataruiShadcn compatible avatar on Base UI with image and initials fallback, three sizes, a status badge and an overlapping avatar group with a plus count.npx shadcn@latest add ui.minidev.pro/r/avatar.jsonCarouseluiScroll snap React carousel with previous and next buttons, arrow key support and a labelled region. Shows one, two or three slides by breakpoint, no library.npx shadcn@latest add ui.minidev.pro/r/carousel.jsonFile ListuiA stacked list of file rows showing each name and metadata such as size or date, with an optional download button per item. Good for React attachment lists.npx shadcn@latest add ui.minidev.pro/r/file-list.jsonFile RowuiA single file row with an icon, a truncated name, an optional meta line and a ghost download button with an accessible label. Styled with Tailwind.npx shadcn@latest add ui.minidev.pro/r/file-row.jsonImage GalleryuiA responsive photo grid of square tiles, two columns on mobile and three on larger screens, each image cropped to fill. Built with React and Tailwind.npx shadcn@latest add ui.minidev.pro/r/image-gallery.jsonImage LightboxuiA clickable image thumbnail that opens a full screen modal of the picture with a dimmed backdrop and a close button. Handy for screenshots and product shots.npx shadcn@latest add ui.minidev.pro/r/image-lightbox.jsonLink PreviewuiA rich link card with an optional 2:1 cover image, title, two line description and the URL, opening in a new tab. Good for chat messages, posts and bookmarks.npx shadcn@latest add ui.minidev.pro/r/link-preview.jsonVideo Player ChromeuiVideo player chrome with a 16:9 stage, a centered play and pause button, a volume icon, a playback progress bar and a title. Bring your own video in React.npx shadcn@latest add ui.minidev.pro/r/video-player-chrome.jsonImage CropperuiReact image cropper with drag to pan, wheel and pinch zoom, aspect presets, a circular avatar mask and 90 degree rotation that returns the crop in source pixels.npx shadcn@latest add ui.minidev.pro/r/image-cropper.json
Blocks and full pages 2
Device FrameblockWraps any React UI in a phone with notch, status bar and side buttons, or a browser window with a URL bar. Built from theme tokens for light and dark.npx shadcn@latest add ui.minidev.pro/r/device-frame.jsonMedia LibraryblockA Tailwind media library panel with an upload action and a two column grid of assets showing file name, size and a type badge for image, video, vector or doc.npx shadcn@latest add ui.minidev.pro/r/media-library.json
Motion 2
Before After WipemotionA before and after comparison slider in React: drag the handle or use the labelled range input to wipe between two layouts across the full width.npx shadcn@latest add ui.minidev.pro/r/before-after-wipe.jsonFilmstrip ScrubmotionA filmstrip scrubber with a preview area, a row of selectable frame buttons using aria-pressed, and a range slider to scrub through frames quickly.npx shadcn@latest add ui.minidev.pro/r/filmstrip-scrub.json
Frequently asked questions
Does the dropzone support multiple files?
Yes. It accepts multiple files, filters by type with the accept prop, and lists each file with progress, error and retry states.
Is there an image lightbox?
Yes. Pair the image gallery with the image lightbox component to open any image full size.
Where do the files get uploaded?
Wherever you choose. The components call your upload handler and render progress you report back.