Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Stepper Playground Block for React

A design system's stepper playground with orientation, indicator, descriptions and step count controls, a live preview and a props line you can copy to the clipboard.

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

Let people try a stepper before they copy it, with this stepper playground for React with Base UI. A hairline frame with plus marks holds four controls at the start: orientation as a Toggle Group, indicator (numbers, icons or dots) as a Segment Group, a Switch for descriptions and a Select for the step count from 3 to 6. At the end a framed stage shows a live read-only Steps that redraws with every choice and keeps one height, so nothing below it moves. Under the stage a props line for Quillwork UI's Stepper is built from the choices, and "Copy props", the block's one Shine Button, writes it to the clipboard and says so. Everything is drawn in foreground tones. On a phone the controls sit above the stage. For docs pages, component galleries and design system sites.

FAQ

Does the copy button really copy?

Yes. It writes the props line to the clipboard with the browser's clipboard API and a polite line says it worked or that the browser refused. The line is also plain text you can select.

Is the props line a real API?

It is the line a fictional design system, Quillwork UI, would expect. The preview is the catalog Steps, so to use it for real, map each choice to the props of your own component: orientation and count are Steps props, the indicator and descriptions are what you render inside each item.

Why does the stage never change height?

It has a fixed height tall enough for six vertical steps with descriptions and scrolls inside if your content is taller. The props line and the status sit below it, so they stay where they are.

How do I change the sample steps?

Edit EXAMPLES: each has an id, a title, a description and an icon. The preview shows the first three to six of them.

How does the keyboard work?

Tab visits the controls in order. The orientation group and the indicator control use arrow keys between their options, the switch flips with Space, and the select opens with Enter or Space. The preview is read-only and has no tab stops.

Does it work right to left?

Yes. The stage, the line and the markers follow the direction, and the props line stays left to right because it is code.

All 100 stepper blocks