Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Subscription Setup Stepper Block for Ark UI

A four-step seed-box subscription where changing the plan after Add-ons removes what the plan now includes, marks Add-ons Review again, and keeps Activate off until you go back.

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 a change to one answer visible in the answers that depend on it, with this subscription stepper for React with Ark UI. A hairline frame with plus marks holds a Steps line of four circles: Plan, Cycle, Add-ons and Activate. Plan is a Radio Group of three cards with a monthly price, Cycle is a Segment Group of monthly or yearly, Add-ons is a list of Checkboxes, and Activate takes a name, an email and a ZIP code and reads the order back. A band under the panel keeps the total in view: a year costs ten months. If you change the plan after you have seen Add-ons, the add-ons the new plan already includes are ticked for you and leave your list, Add-ons shows a refresh glyph and "Review again", and Activate stays off until you have been back. "Start subscription" is the block's one Shine Button.

FAQ

How does Review again work?

A stale flag is set when the plan changes after the Add-ons step was reached. It adds the glyph and the words to that step on the line, turns Activate's step button off, and shows "Review Add-ons before you activate." in the foot. Arriving on Add-ons clears it, whether by Next or by pressing the step. Cycle changes do not set it.

What happens to add-ons a plan already includes?

PLANS lists the add-on ids each plan includes. Choosing a plan removes those from your own picks, shows them ticked and disabled with "Included with your plan", and takes them out of the total. Switching to a smaller plan makes them a normal, paid choice again.

How is the total worked out?

In integer cents: the plan's monthly cents plus every paid add-on's monthly cents, times ten for a yearly cycle. usd is the only place cents become dollars, so the cards, the band and the confirmation agree.

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

Everything. Nothing is billed: the last panel says "Started in this demo". To make it real, send the plan, cycle, add-ons and delivery details from the submit handler on Activate to your billing API, and have the server price the order again rather than trusting the total shown.

How does the keyboard work?

The step line is one tab stop on the current step; arrow keys move between the steps you can reach, and Activate is skipped while it is off. Enter inside a field is Next. After a move, focus goes to the new step's heading, and a polite line in the foot says what changed.

How does it look on a phone?

Only the numbers show in the step line, with "Step 3 of 4: Add-ons, review Add-ons again" under it when that applies. The total band and the foot stick to the bottom of the screen.

All 100 stepper blocks