shadcn.io is not affiliated with official shadcn/ui
Picture Timeline Gallery Block for React
A vertical timeline of drawn pictures hung on a hairline through five years of a tools maker's story, with a year index that marks the year in view, jumps on choosing one and becomes a row of chips on a phone.
Installation
Overview
A picture timeline for React with Base UI, for Anvil Works, a tools maker. Under a compact header, a split behind a divider: at the start a framed scroll region, labelled and in the tab order, holds five years on a hairline down its middle, each a chip on the line with two drawn pictures hung to alternate sides (all on one side on a phone), each with a title and a line of the story; at the end a year index marks the year in view with a sliding bar and says "Year 3 of 5". Choosing a year scrolls the timeline to it, never the page. The timeline comes first in the DOM, so it reads before the index. On a phone the index becomes a row of chips above the timeline that also follows it. The pictures are drawn, not photographed, in your theme's greys. It's built from Toc and Guides. The workshop, years and captions are made up for the example.
FAQ
How do I use my own years and pictures?
Edit ERAS: each has a year, an anchor (the heading's id the index points at) and a list of pictures with a title, a note, a description and a ratio. Replace the Scene in a picture with <img alt="" className="size-full object-cover" src={…} /> and keep ratio at the photograph's width over its height. The index is built from the same list.
Why does it scroll in a frame?
So the page does not run on for ten screens. The frame is a labelled region you can focus and scroll with the arrow keys, and the index scrolls the frame, not the page. The index reads which year heading is in view as you scroll and moves its bar to it.
How does it work with a keyboard?
Tab reaches the timeline frame, where the arrow keys, Page Up, Page Down, Home and End scroll it, then each year in the index; Enter on a year scrolls the timeline to it. Screen readers get the years as a list of headings, each followed by its pictures as figures with captions.
Related
- Pro
Scrolling Article Table of Contents Blog
Article partsA framed, fixed-height essay with six sections beside a rail that follows the section in view with a sliding bar, and a Jump to select on phones; choosing a section scrolls the essay, never the page.
- Pro
Milestone Wall Gallery
Walls and tablesEight drawn pictures in a snapping horizontal scroller whose frames rise one step each, with the year and a figure on every frame, a progress bar that fills as you scroll and Previous and Next year buttons.
- Pro
Horizontal Track Timeline About
TimelinesA company timeline drawn as one horizontal track: six milestones in relative time, each a cell of a ruled band with a dot on the rule, turning into a vertical rail on phones.
- Pro
Chaptered Origin Story About
Company storyA company's origin story as four long chapters of prose beside a sticky chapter index that follows the reader, turning into a row of chips on phones.
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.
- Pro
Evolution Case Study Gallery
Annotated picturesOne 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.