shadcn.io is not affiliated with official shadcn/ui
Scroll Snap Reel Features Block for React
A features section as a full-height vertical snap reel: five slides that lock into place as you scroll, each with a drawing, a title, a sentence and three stats, a rail of dot buttons and a counter beside a sticky header.
Installation
Overview
A features section for React with Base UI, built as a vertical reel. At the end of the page a scroller as tall as the viewport (up to 44rem) holds five slides that each lock into place with scroll snapping; every slide is a drawing of one step of a workspace-onboarding product, a title, a sentence and three stats. A rail of dot buttons at the reel's edge jumps to a slide, and a counter in the sticky side header ("02 / 05" with a progress bar) follows the slide on screen. A divider that meets the page's top rule with a plus mark splits the header from the reel. On a phone the reel follows the header at 28rem and the counter becomes a small badge in its corner. It's built from Button, Badge and the Guides line kit, with your theme's tokens for every colour and no primary button.
FAQ
How do I change the slides?
Edit SLIDES at the top of the file: each has an id, a title, a sentence and three stats. The id picks the drawing (ImportArt, InviteArt and so on), so a new slide needs a small drawing component and a line in Art. The counter, the dot rail and the progress bar are built from the same list.
How does it work from the keyboard?
The reel is a named region you can focus: Tab to it, then the arrow keys, Page Down, Page Up, Home, End and Space scroll it, and each slide snaps into place. The dot buttons are ordinary buttons with a name like "Slide 2 of 5: Invite the team", and the one on screen is marked as current.
What moves, and what happens with reduced motion?
Dots and the progress bar change as you scroll, and clicking a dot glides to its slide. With reduced motion the glide is off, so a click jumps straight there, and the bar and dots change at once. The scroll snapping itself stays, because it is how the reel is read.
Why is the reel as tall as the viewport?
So one slide fills the screen at a time. Its height is min(100svh, 44rem), set once as a CSS variable that the scroller and every slide share, so a slide is always exactly one screen of the reel. On a phone it is a fixed 28rem, which keeps the header and the first slide on one screen.
Related
- Pro
Card Carousel Features
Carousels and mediaA multi-up carousel of seven capability cards for a product-tour builder, each led by a greyscale drawing, with the next card cut off at the rail and previous and next buttons in the heading row.
- Pro
Carousel Slider Features
Carousels and mediaA one-slide-at-a-time carousel of the five steps of making a deck, each a checklist beside a greyscale drawing, with a segmented progress bar of labelled segments as the navigation.
- Pro
Scroll Progress Ruler Track Features
Timelines and stepsA features section for an analytics SDK: a sticky ruler of six anchor-link ticks that follows six full sections as you scroll, lighting the tick of the section on screen with a sliding thumb.
- Pro
Sticky Headline Scroll List Features
Headline-ledA feature list for a developer platform: a narrow headline column that stays in view beside eight numbered rows, each ending in a compact mockup of the feature.
- Pro
Swipe Deck Features
Carousels and mediaA features section as a triage deck of feature requests: drag the top card past a threshold to keep it or skip it, or use the Keep and Skip buttons and the arrow keys, with a tally and a Start over button.
- Pro
3D Ring Carousel Features
Carousels and mediaSix capability cards on a true 3D ring in a framed stage, turned a card at a time by the previous and next buttons or the arrow keys, with the far cards dimming behind the front one.