Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Evolution Case Study Gallery Block for Radix UI

One identity in four pictures (a logo sketch, a wireframe, a mock-up and the shipped screen) beside a sticky summary and a stage index whose bar follows the stage on screen.

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 case-study gallery for React with Radix UI, for Yellowpine Design, a brand studio, showing one design's evolution. Behind a split divider, the end column is four bands in the order the work was made: a logo sketch, a wireframe, a grey mock-up and the shipped screen, each picture beside a time, a heading and a sentence. The start column holds the title, a summary of the project (client, role, year and team) and a stage index that stays in view while you read: a bar follows the stage on screen and each entry jumps to its band. On phones the index becomes a row of chips above the pictures. The pictures are drawn in code, not photographed, and the project, client and dates are made up for the example. Built from Toc, DataList and Guides.

FAQ

How does the index follow the scroll?

The Toc watches the four headings (each band's h3 has the id its entry links to) and marks the one on screen with a bar. Choosing an entry scrolls to its heading and updates the address. The index sits in a sticky column, so it stays beside the pictures on wide screens.

How do I use my own pictures?

Each stage in STAGES has an id, an anchor, a time, a heading and a sentence, and ArtFor returns its picture. Replace a drawing with an img (keep its box, 16 by 10 from md), and keep the heading's id: the index reads the anchors from the same list.

How does it work with a keyboard?

Tab reaches the index's links, and Enter jumps to a band. The pictures are drawings, so the heading and sentence beside each one carry the meaning. On phones the chips are links to the same anchors.

Does it work in a right-to-left page?

The split and the index bar mirror. The drawn pictures keep their own direction, since they show a layout and a mark, and the summary's year is left as digits.

What changes on a phone?

The index becomes a row of chips, the summary two columns, and each band stacks its picture above its heading; the longer sentences are left out to keep the page short.

Does it follow my theme?

Yes. Every tone is mixed from your foreground, background and card colours, so the sketch, the grey mock-up and the shipped page are light in a light theme and low-key in a dark one.

All 100 gallery blocks