shadcn.io is not affiliated with official shadcn/ui
Paginated Minimal Grid Gallery Block for React
A quiet grid of twenty-four drawn concrete-architecture plates, eight to a page on shared hairlines, with a title and year that appear on hover and focus and the catalog pagination in a band that ends the block.
Installation
Overview
A paginated, minimal grid for React with Base UI. A start-aligned header sits over a grid of drawn plates on shared hairlines that run rail to rail: eight to a page, two columns on a phone and four from lg, three pages in all. A plate shows only its picture; its title and year slide up over the foot of the picture on hover and on keyboard focus, and are always shown on a touch screen. The catalog Pagination in a band under the grid swaps the eight plates in place, with a polite line that says "Plates 9 to 16 of 24". The plates are drawn in the theme's greys, never photographed. It's built from Guides and Pagination. For monographs, catalogues, archives and any collection where the pictures should stay quiet.
FAQ
Is the caption only for the mouse?
No. Each plate is a link, so Tab reaches it and the caption appears with focus. Under a coarse pointer (a phone or a tablet) the title and year are simply always shown. The caption stays in the markup the whole time, so a screen reader reads it whatever the pointer does.
Are the page numbers real links?
?page=n address, and a click swaps the plates in place instead of loading it.Previous and Next are aria-disabled and out of the tab order at the ends.Does the grid move when I change page?
No. All three pages sit in one grid cell, the pages that aren't shown invisible, aria-hidden and inert, so the grid keeps the height it has and the pager never moves. Every plate is the same ratio, so each page is the same height.
How do I use my own photographs?
The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change.
Related
- Pro
Numerals Over Maps Gallery
Hairline gridsSix drawn route maps on shared hairlines, each with its distance laid over the foot in large figures on a solid, masked panel, and a Show control that rolls every figure between this year and all time.
- Pro
Hover Caption Masonry Gallery
Masonry and mosaicA masonry wall of nine drawn interiors in three columns, each in its own framed cell, with a caption and a Save toggle that rise on hover and on focus and a live count of saved pictures.
- Pro
Re-lead Mosaic Gallery
Masonry and mosaicA dense mosaic of nine drawn quilt patterns on shared hairlines, eight squares and one lead two cells wide and two tall, with a Lead control that moves the big square while the rest reflow.
- Pro
Inline Expansion Thumbnail Grid
Hairline gridsSixteen drawn thumbnails on shared hairlines, eight across, where choosing one opens a preview band straight under its row with the whole picture, its source, Previous, Next and Close, without changing the block's height.
- Pro
Caption Density Gallery
Rows and bandsA photo essay of five framed pictures in alternating rows, with a Short and Full switch: Short shows each title, Full adds the place, date, credit and a two-sentence story.
- Pro
Pagination Blog
Post listsA transit-planning blog's archive as rows, four to a page over three pages, with the catalog pagination in a band at the foot, a polite 'Showing 5 to 8 of 12' line and a height that never changes between pages.