Shadcn.io is not affiliated with official shadcn/ui
Features Scroll Snap Reel Viewport
A scroll snap reel viewport features section for React and Next.js with a fixed-height snapping scroll container, five full-slide capabilities, and a vertical dot navigator built with shadcn/ui and Tailwind CSS
Tour a product through five snap-locked slides with this scroll snap reel viewport block for React and Next.js. Features a fixed 600-pixel scroll container using CSS scroll-snap-type mandatory, five structurally distinct slides (centered hero, side-by-side split, inline mockup, metric wall, workflow ribbon), a floating vertical dot nav that scrolls the viewport on click, and a scroll listener that reports the active slide as the user drags. Built with TypeScript, Lucide React icons, motion/react entrance animations, shadcn/ui Badge and Separator components, and Tailwind CSS. Perfect for SaaS product tours, onboarding walkthroughs, and marketing pages that need to present a sequence of capabilities without leaving a single viewport.
Related Components
React Features Sticky Headline Scroll List Block
Sticky headline scroll list layout
React Features Sticky Headline Six Point Block
Sticky headline six point layout
React Features Horizontal Panel Concertina Block
Horizontal panel concertina layout
React Features Layered Deck Shuffle Stack Block
Layered deck shuffle stack layout
React Features Filmstrip Frame Row Block
Filmstrip frame row layout
React Features Horizontal Marquee Band Block
Horizontal marquee band layout
FAQ
Was this page helpful?
Sign in to leave feedback.
Scroll Progress Ruler Track
A scroll progress ruler track features section for React and Next.js with a sticky horizontal ruler, numbered tick marks, a sliding thumb indicator, and six IntersectionObserver-linked feature cards built with shadcn/ui and Tailwind CSS
Segmented Accordion Mockup
A segmented accordion mockup feature section for React and Next.js with a top PillTabs category selector, a 40/60 accordion and image split, and a crosshair mockup that swaps via AnimatePresence when the accordion selection changes built with shadcn/ui and Tailwind CSS