shadcn.io is not affiliated with official shadcn/ui
Full Page Sections Stepper Block for React
A kitchen planner as one scrolling page of four questions, with a rail of four dots that follows the scroll and jumps to a section, a tick for each answered one, and a Shine Button that scrolls on and then saves the plan.
Installation
Overview
Turn a long form into one page you scroll, with this section stepper for React with Base UI. A hairline frame with a plus mark on each corner holds a scrolling stage of four sections from Kitchenry, a kitchen planner, each as tall as the stage and snapping to its top: Space (a Slider for the floor area, with a line on what fits), Layout (a Radio Group of four layouts), Style (a Segment Group of three door styles) and Budget (a figure that is checked against the area). A rail of four dots at the stage's end follows the scroll, jumps to a section when pressed and shows a tick once you have touched that section's control. The foot has a polite status line and the block's one Shine Button, which scrolls to the next section and on the last one saves the plan. On a phone the rail gives way to a "Section 2 of 4" line pinned to the top of the stage. For planners, configurators and any form better read as a page than as a wizard.
FAQ
How does the rail know which section is showing?
The stage reports its scroll position and the block rounds it to a section: the stage is a fixed height and each section fills it, so the section index is the scroll offset divided by the stage's height. Pressing a dot or Next section scrolls the stage itself, never the page, and moves instantly when the visitor asks for reduced motion.
How do I change the sections?
SECTIONS lists the four by id and title and the sections themselves are four blocks of markup inside the scroll region, each with PAGE as its class. Add a section by adding an entry and a block of markup; the rail, the count in the status line and the ticks follow. A section is ticked by calling touch with its id from its control's handler.
What stays local, and how do I make it real?
Everything. The answers live in component state, and Save plan says "Plan saved in this demo": nothing is ordered or priced. In your app send area, layout, style and budget to your server from advance on the last section and show its quote in the status line. The estimate under the budget is a simple price per square metre, not a quote.
How does the keyboard work?
The stage is focusable, so the arrow keys, Page Up and Page Down scroll it, and each section snaps into place. The rail is four buttons in reading order; Up and Down move between them, and each is named like "2 of 4: Layout, done". Pressing Enter in the budget field saves or moves on like the Shine Button, because the panel is one form. The status line speaks only after a press, not while you scroll.