Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Tabbed Content Stepper Block for Radix UI

A crop plan in vertical tabs that open in any order, each gaining a check when its own field is filled in, with a fifth Plan tab that stays locked until all four have one.

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 fill in sections in any order and still know when they are done, with this tabbed content stepper for React with Radix UI. A plus-marked panel holds a vertical Tabs list with four sections and a fifth tab, Plan. Overview is a crop name Input, Soil a pH Slider, Crew a Number Input and Market a Select. Each section shows a check as soon as its own field is complete, and the line under the list counts them ("Complete 3 of 4 sections"). The Plan tab is locked until all four have a check; then it shows a Data List worked out from the answers and the block's one Shine Button, Save plan. On a phone the list becomes a row that scrolls sideways.

FAQ

Why is this not a step-by-step wizard?

The sections do not depend on each other, so the tabs open in any order and there is no Back or Next. The only gate is the Plan tab, which opens when every section is complete. The count is worked out from the fields each time, not stored.

When does a section count as complete?

Overview needs a crop name of two letters or more, Soil needs the slider to be moved once, Crew needs one person or more and Market needs an outlet to be chosen. Each rule is one line near the top of the component, and the checks and the count follow from them.

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

Everything. The answers live in component state and Save plan only marks the plan as saved in this demo; changing any section clears that. To make it real, send the four answers from the Save plan handler to your API, and keep the plan tab as the review before it.

How does the keyboard work?

The list is one tab stop. Up and Down move between tabs (Left and Right when it is a row on a phone), Home and End jump to the first and last, and the locked Plan tab is skipped until it opens. The panel is a tab stop of its own so its fields are reached with Tab.

Does the panel change height between tabs?

No. Every panel has the same minimum height, taller than the tallest one, so the foot and the count line stay where they are as you switch.

How does it look on a phone?

The list becomes one row above the panel that scrolls sideways, with the check and the lock still visible on each tab. The count line is hidden there because the header above the panel already says "3 of 4 sections".

All 100 stepper blocks