shadcn.io is not affiliated with official shadcn/ui
Scrolling Screenshot Gallery Block for React Aria
A tall landing page drawn in code and shown in a fixed-height browser window that a Scroll preview button plays down, a slider scrubs and an index of five sections jumps.
Installation
Overview
A long-page screenshot gallery for React with React Aria, for Quillbill, an invoicing app. A tall page, five sections drawn in code (a header, a hero with an invoice card, three features, three plans and a footer), sits in a browser window of fixed height at the end of a split, framed with + marks. The start column has three controls for it: a "Scroll preview" button that plays the page down one section at a time, a slider that scrubs it to any point, and an index of the five sections that jumps to one. A line under the window names the section on show. On phones the window comes before the controls. The page is boxes and bars in your theme's greys, not a photograph, and the figures in it are made up for the example. Built from Slider, Button and Guides.
FAQ
What does Scroll preview do?
It moves to the next section at once and then every couple of seconds, with a slow CSS glide, and stops at the footer. Pressing it again pauses; it is a toggle button, so its pressed state tells you whether it is playing. Using the slider or the index stops it. Pressed at the end, it plays from the top again.
What happens with reduced motion?
Nothing plays by itself: each press of Scroll preview moves to the next section at once, with no glide, and stops. The slider and the index work as before.
How do I use my own page?
Replace the five band components with your own sections (or one tall screenshot), and set HEIGHTS, NAMES and the window's h-[22rem] and [--range:…] classes to match: the range is the page's height minus the window's, in rem. The slider's stops and the index are computed from those lists.
How does the slider read to a screen reader?
It is a labelled slider from 0 to 100 whose spoken value is the section on show, for instance "Pricing", not the number. Arrow keys move one step, Page Up and Page Down move more, and Home and End go to the top and the foot.