Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Paginated Minimal Grid Gallery Block for Ark UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A paginated, minimal grid for React with Ark 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?

Each page link has a real ?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.

Which keys work?

Tab visits the eight plates of the page in order, then the pager. Enter follows a plate or a page link. The page links are ordinary links, so there is nothing to learn.

How does it fit on a phone?

Two columns by four rows per page. The pager sits under the grid with the "Plates 1 to 8 of 24" line above it, and the captions are shown on every plate.

All 100 gallery blocks