Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Pill Segments Stepper Block for Ark UI

A yoga class builder whose four blocks are the pills of a segmented control, with a thumb that slides under the current one and a class length worked out from the blocks you keep.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Make the stepper a segmented control, with this pill stepper for React with Ark UI. A plus-marked frame holds a muted pill track of four Steps buttons: Warm-up, Flow, Balance and Cool-down. A card-coloured thumb slides under the one you are on, and a small dot marks the blocks you have reached. Each block lists its three poses with their minutes in a Data List and has a Switch to leave the block out; the line above says "Class length 48 min" and follows the switches. "Next block" is the block's one Shine Button, and the last press saves the class. On a phone the track scrolls sideways. For builders, pickers and any flow with a few short parts.

FAQ

How do I change the blocks?

BLOCKS lists each block with its id, a title, a sentence and its poses as a name and minutes. The block's total, the class length and the saved summary are worked out from them and from the list of blocks switched off. The thumb's width is a quarter of the track: change the 4 in the two calc() values if you add or remove a block.

What stays local, and how do I make it real?

The class is component state, and saving ends on a note that says it was not added to a timetable. To make it real, send the ids of the blocks that are in from advance on the last step to your API.

How does the thumb work?

It is a drawing under the buttons, placed with a CSS variable for the step's index and moved with a transition on its inline start, so it follows the track in a right-to-left layout. The transition is skipped when reduced motion is on. The real state is on the buttons.

How does the keyboard work?

The track is one tab stop on the current pill. Arrow keys move between the pills you can reach, Home and End jump to the ends, and Enter or Space opens the focused one; in a right-to-left layout the arrows swap. Pills past the furthest block reached are disabled.

What happens to a block I switch off?

Its poses read "Left out" instead of their minutes, the class length drops by the block's minutes and the saved summary lists it as left out. You can still step through it.

How does it look on a phone?

The track keeps a minimum width and scrolls sideways, and the pill you move to scrolls into view inside the track only. The class length stays on a line under it, and the foot stays pinned.

All 100 stepper blocks