shadcn.io is not affiliated with official shadcn/ui
Milestone Wall Gallery Block for React
Eight 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.
Installation
Overview
A milestone wall for React with Base UI, for Seedlings Lab, a hydroponics company. A centred header sits over a band holding eight drawn pictures in a horizontal scroller, laid out as a stair: each frame is one step taller than the last, so the wall climbs from a single tray on a windowsill to a hall of racks, and each carries "Year 3", a figure and a title. The scroller is a labelled, focusable region that snaps to the frames, so a swipe, the wheel or the arrow keys move it. Under it a ruled band holds a progress bar that fills as you scroll, a line that says which years are in view ("Year 3 of 8", or "Years 2 to 5 of 8" when several fit) and Previous and Next year buttons that go one frame at a time. The pictures are drawn, not photographed, in your theme's greys. It's built from Progress, Button and Guides. The company, years and figures are made up for the example.
FAQ
How do I use my own milestones?
Edit MILESTONES: each has a year, a figure, a title, a description and an id. Replace the Scene in a frame with <img alt="" className="size-full object-cover" src={…} /> (the figure's text names it), and change BASE and STEP for the height of the first frame and each step. The stair classes in stepClass follow those numbers.
How does the stair work?
Every frame is the same width and one step taller than the one before, and they all stand on the same line: the row aligns its frames to the bottom. Each picture is drawn at the shape of its own box, so the first, short and wide, shows one tray on a shelf and the last, tall, shows two full racks.
What does the progress bar track?
How far the scroller has moved, as a share of what there is to scroll, worked out from its position as it moves. The line beside it names the first and last frame fully in view, as "Year 3 of 8" or "Years 2 to 5 of 8", and is polite for a screen reader. The bar is decorative: the line beside it says the same for a screen reader.
How does it work with a keyboard?
The scroller is one stop in the tab order, labelled "Milestones, scroll sideways"; once it has focus the arrow keys scroll it and Home and End go to the first and the last frame. Previous and Next year are buttons after it; at either end they stay in the tab order but do nothing, so focus is never lost.
Related
- 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
Picture Timeline Gallery
Rows and bandsA 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.
- Pro
Film Strip Ribbon Gallery
Rows and bandsA strip of film with real sprocket holes and frame numbers carrying eight drawn black-and-white scenes in a snapping, keyboard-scrollable band, with a Rewind button back to the first frame.
- Pro
Carousel Gallery
Carousels and slidesNine drawn trail pictures in a ruled band for a trail-guide app, three wide with the next one cut off at the rail, turned with buttons, dots and the arrow keys, under a heading row with a live counter.
- Pro
A product's history as a version scrubber: a stepped slider from v1 to v6 grows a drawing of the app panel by panel while two notes say what changed and who it helped.
- 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.