Media Gallery
Media Gallery displays a responsive grid of images or videos adapted for desktop, tablet, and mobile breakpoints with RTL support.
export default function MediaGalleryRealWorld() { const [search, setSearch] = useState(''); const [view, setView] = useState<MediaGalleryView>('grid'); const [page, setPage] = useState(1); const [viewerOpen, setViewerOpen] = useState(false);Installation
npx sdaia-ui@latest add media-gallery
Usage
import { MediaGallery } from "@/components/ui/media-gallery"<MediaGallery breakpoint="desktop" />Examples
Desktop
Media gallery in a multi-column desktop layout.
<div className="w-full"> <MediaGallery images={images} currentPage={page} totalPages={5}Tablet
Media gallery adapted for tablet screen sizes.
<div className="w-full max-w-[600px]"> <MediaGallery images={images} currentPage={page} totalPages={3}Mobile
Media gallery in a single-column mobile layout.
<div className="w-full max-w-[360px]"> <MediaGallery images={images} currentPage={page} totalPages={2}API Reference
MediaGalleryProps
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 |
