Media Gallery displays a responsive grid of images or videos adapted for desktop, tablet, and mobile breakpoints with RTL support.
Loading demo: media-gallery-real-world
npx sdaia-ui@latest add media-gallery
import { MediaGallery } from "@/components/ui/media-gallery"<MediaGallery breakpoint="desktop" />Media gallery in a multi-column desktop layout.
Loading demo: media-gallery-desktop
Media gallery adapted for tablet screen sizes.
Loading demo: media-gallery-tablet
Media gallery in a single-column mobile layout.
Loading demo: media-gallery-mobile
Props for the MediaGallery component.
Prop | Type | Default | Required |
|---|---|---|---|
toolbar | boolean | true | optional |
searchValue | string | - | optional |
onSearchChange | (value: string) => void | - | optional |
searchPlaceholder | string | 'Search' | optional |
emptySearchLabel | string | 'No results found' | optional |
activeView | 'list' | 'grid' | - | optional |
onViewChange | (view: MediaGalleryView) => void | - | optional |
onFilterClick | () => void | - | optional |
onDeleteClick | (selectedImages: MediaGalleryImage[]) => void | - | optional |
onExportClick | (selectedImages: MediaGalleryImage[]) => void | - | optional |
exportLabel | string | 'Export' | optional |
onAddClick | () => void | - | optional |
addLabel | string | 'Add' | optional |
onMoreClick | () => void | - | optional |
images | MediaGalleryImage[] | [] | optional |
pagination | boolean | true | optional |
currentPage | number | 1 | optional |
totalPages | number | 1 | optional |
onPageChange | (page: number) => void | - | optional |
rtl | boolean | false | optional |
dir | "ltr" | "rtl" | — | optional |