shadcn.io is not affiliated with official shadcn/ui
Contact Sheet by Day Gallery Block for React
A conference's three days as pill tabs, each day a contact sheet of drawn pictures in justified rows of equal height with the time and place under every one.
Installation
Overview
A contact-sheet gallery for React with Base UI, for Openmoor Conf, a developer conference. A centred compact header sits over three pill tabs (Day 1, Day 2 and Day 3, each with its date), and the open day shows its pictures in justified rows: every row spans the page and its pictures share one height, each picture's width following its aspect ratio, with the time and the place under each. A badge gives the day's date and a line its picture count. The three panels sit in one grid cell with unseen copies of the others, so the sheet keeps the same height whichever day is open. On a phone the rows become a plain two-column grid. The pictures are drawn, not photographed: a stage with slides, a crowd, a sponsor booth, a coffee queue, workshop tables, a skyline and a dinner table in your theme's own greys. It's built from Tabs, Badge and Guides, with your theme's tokens for every colour. The conference, the dates, the times and the places are made up for the example.
FAQ
How do I use my own event photographs?
Each picture in DAYS has a title, a place, a time, an iso time for the time element, a ratio (width over height) and a scene. Add your image's address and replace the Scene in Shot with <img alt="" className="size-full object-cover" src={…} />; the caption already names it. Set ratio to the photograph's real aspect ratio and the row stays justified: a wider picture gets a wider share of the row.
How do the rows stay the same height?
Each row is a flex row, and each figure takes flex-grow equal to its aspect ratio from a zero basis, so its width is proportional to its ratio. A picture's height is its width divided by its ratio, which is then the same for the whole row, and the row's height follows from the page width. A day lists its rows (here two rows of three), so the line breaks are in the data and never depend on the screen width.
Does the sheet jump when I change day?
No. Every day is also in the page as an unseen copy, stacked in the same grid cell as the live panels: the tallest sets the cell's height, so the page below never moves. The copies are invisible, inert and aria-hidden, so nobody can focus or read them.
How do the tabs work with a keyboard?
Tab reaches the tab list, the arrow keys move between Day 1, Day 2 and Day 3 (Home and End jump to the ends) and the panel under it shows that day. The panel's pictures are plain figures, so there is nothing else to tab through.
Related
- Pro
Thumbnail Strip Gallery
Stage and thumbnailsA viewer for a lighting shop: a framed 4:3 stage with Previous and Next, its caption beside it, and a scrollable strip of twelve thumbnails whose arrow keys step through the pictures.
- Pro
Sortable Masonry Gallery
Masonry and mosaicA masonry wall of twelve drawn pictures of mixed ratio in CSS columns, framed with + marks on its corners, with an Order control (Newest or Oldest) that re-sorts them.
- Pro
Categorized Tabs Gallery
Filter, sort and tabsA vertical list of five collections, each with its count, beside a grid of that collection's pictures on shared hairlines, with the list carrying the divider.
- Pro
Tab Categories Gallery
Filter, sort and tabsA band of four tabs where each panel is a collection's own page: a large cover, its name, two lines about it, its picture count and four more pictures.
- Pro
Category Grid Tab-Filtered Logos
Tabs and filtersFour pill tabs (All, Growers, Co-ops, Advisers) over a wall of eight customer wordmarks in shared hairline cells, for a farm planning tool.
- Pro
Paginated Minimal Grid Gallery
Hairline gridsA 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.