shadcn.io is not affiliated with official shadcn/ui
Bottom Bar Mobile Stepper Block for React Aria
A courier driver's pre-shift check in a phone-shaped window with its own bar fixed to the foot: Back, four dots and Next, over four steps of vehicle ticks, a route, a cargo load checked against the van's limit, and a go-online step.
Installation
Overview
Give a phone flow its own bar, with this mobile stepper for React with React Aria. A phone-shaped window with rounded corners sits in a hairline frame with a plus mark on each corner: a top bar with the title "Pre-shift check" and "Step 2 of 4", a screen that scrolls between them, a one-line status and, fixed to the window's foot, the app's own bar with Back, a Steps line of four dots and the block's one Shine Button. The four steps are a courier's pre-shift check in Haulette, a driver's app: four Checkbox rows to walk round the van, a Radio Group of three routes, two number fields for parcels and weight checked against the van's 900 kg, and a read-back before Go online. Next refuses while a step is incomplete and the status line says why ("Tick 2 more checks"); reached dots stay pressable. The last step ends on "Online in this demo". On a real phone the window drops its rounded border and becomes the page. For driver, delivery and field apps.
FAQ
Why is the bar part of the window and not the page?
Because the bar is the feature: on a phone the thumb reaches the foot, so Back and Next live there and the dots show progress without taking a row. The bar is the last child of the window's flex column, so it stays at the foot while the screen above it scrolls; nothing is positioned over the content.
Why does Next sometimes do nothing?
It isn't disabled: it stays focusable and answers. On the vehicle step it counts the checks still to tick, and on the cargo step it names the problem (no parcels, no weight, more than 80 parcels, or more than 900 kg), shows it under the fields and moves focus to the first field. The button rests as a quiet chip while a step is incomplete, so the call to action looks ready only when it is.
What stays local, and how do I make it real?
Everything. The ticks, the route and the load live in component state and Go online ends on "Online in this demo": no dispatcher is told and no parcel is assigned. In your app send the ticks, route, parcels and weight from advance on the last step to your server, and let it answer whether the driver may go online.
How does the keyboard work?
The dots are one tab stop on the current step: arrow keys move between the steps you have reached and Enter or Space opens one. After a move, focus goes to the new step's heading and the status line reads "Step 3 of 4: Cargo"; nothing takes focus on load. Back is hidden on the first step and after going online.