shadcn.io is not affiliated with official shadcn/ui
Responsive Adaptive Stepper Block for React
A physiotherapy appointment request whose one stepper reflows by its frame: horizontal with titles, then numbers with a step line, then a select and a progress bar.
Installation
Overview
Build a stepper that fits the space it is given, not the screen, with this adaptive stepper for React with Base UI. A control band holds a Toggle Group (Wide, Medium, Narrow) that sets the width of a framed demo, and inside the frame a single horizontal Steps list changes with a container query: from 32rem it shows numbers, titles and joining lines; from 20rem it keeps the numbers and a "Step 2 of 4: Time" line; narrower than that the markers give way to a Native Select and a Progress bar. The four steps are a real request for an appointment: details, a reason and a time chosen with native radios, and a check, with Back and "Request appointment", a Shine Button, inside the frame. A drawn grip marks the frame's edge. For sidebars, cards, modals and any widget that lives in a space of unknown width.
FAQ
Why container queries and not media queries?
A stepper in a narrow card on a wide screen needs the compact form, and one in a full-width page on a phone does not. The frame is an @container, so the classes @lg:, @xs: and their max forms follow its width. Browsers without container queries show the widest layout.
Is it one stepper or three?
One. The same Steps list is shown with its titles hidden visually in the medium layout and hidden entirely in the narrow one, where the select and the progress bar take its place and control the same step.
What stays local?
The answers and the step are component state, and nothing is booked: the last step says so. To make it real, send the four answers to your booking system in the advance handler on the last step.
How does the keyboard work?
In the wide and medium layouts the list is one tab stop and arrow keys move between reachable steps; in the narrow layout the select does it. The width group uses arrow keys and keeps one option chosen.