Scroll Snap Sections React component
Full-height sections that snap into place one at a time as you scroll, each sliding its eyebrow, title and text up while its photo unclips and settles, with a counter, a progress line and dot navigation.
About the Scroll Snap Sections component
Scroll Snap Sections turns a page into chapters: each section fills the view, and scrolling moves cleanly from one to the next instead of stopping halfway. As a section lands, its title and text slide up into place and its photo opens out from a smaller frame and settles.
A counter and progress line show where you are, and dots on the right jump straight to any section. It works with the mouse wheel, trackpad, touch, and the keyboard.
When to use it
Use it for hotel, product and brand stories told in a few big moments, case studies, onboarding tours, or any page where each section deserves the whole screen.
Keep it to a handful of sections with short copy; long text inside a snapping section is awkward to read.
Installation
Add the Scroll Snap Sections component to your project with the shadcn CLI. It lands in components/scroll-snap-sections.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/scroll-snap-sectionsOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<ScrollSnapSections /> accepts 6 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| sections | { id: string; eyebrow?: string; title: string; text?: string; image?: string; imageAlt?: string }[] | SECTIONS |
| height Height of the scroll area; every section fills it. | number | string | 520 |
| showDots | boolean | true |
| theme | "dark" | "light" | "dark" |
| label | string | "Sections" |
| onChange | (index: number, section: SnapSection) => void | — |
- sections{ id: string; eyebrow?: string; title: string; text?: string; image?: string; imageAlt?: string }[]Default: SECTIONS
- height
Height of the scroll area; every section fills it.
number | stringDefault: 520 - showDotsbooleanDefault: true
- theme"dark" | "light"Default: "dark"
- labelstringDefault: "Sections"
- onChange(index: number, section: SnapSection) => void
npm dependencies
Installed for you by the shadcn CLI.
Scroll Snap Sections FAQ
- Can it fill the whole page?
- Yes. Set height to "100svh" (or any CSS height) and every section fills it.
- How do people move between sections?
- Scrolling, swiping or trackpad gestures snap to the next section; the dots jump to any one; and with the area focused, arrow keys, Page Up/Down, Space and Home/End work too.
- Can I know which section is showing?
- onChange gets the index and the section each time a new one becomes active.
- What happens on phones?
- The layout stacks: the photo moves behind the text, dimmed, so the words stay readable on a narrow screen.
