Shadcn Stepper Collapsible Sub-Steps

Stepper with sub-steps in a collapsible card. Built by composing Button, Collapsible, Frame, Separator, Stepper. Uses cn alongside the shadcn primitives. A free, open source shadcn stepper example you can install with npx shadcn@latest add @reui/c-stepper-43 and edit as your own code.

5 ticket resolution phases holding 17 tasks, where the open phase lists its task status in a bordered box and folds away when clicked again.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: Numbered phases with a turning chevron, the open one boxed in a Frame that folds when picked again, its live task on a blue edge bar

When to use

Forms and setup flows split into numbered steps that people move back and forth through
Shipment, delivery and freight tracking shown as stops with times, ETAs and the leg underway
Incident, ticket, sales, proposal and review workflows laid out as stages, cards, rows or nested tasks

When not to use

Phases on a right aligned rail where only the current one unfolds: use the Stepper Right-Aligned Sub-Steps example
A finished screen that runs a billing, invoice or vendor task through numbered steps: use the Wizard blocks
A complete first run account setup shown right after signup, with invites and goals: use the Onboarding blocks
A storefront purchase that takes shipping and card details beside the cart total: use the Checkout blocks

Agent notes

Picking the current phase again folds it, since selectPhase toggles open when the step repeats
onKeyUp cancels Space on the phase trigger so Firefox does not act twice on one press; keep it
StepperTrigger takes another element through render on the base twin and asChild on the radix twin
Trigger ids come from step alone, so 2 steppers on one page need their own id and aria-controls on each StepperTrigger
StepperContent unmounts every inactive step, so keep field values in parent state or pass forceMount

Markdownhttps://reui.io/components/stepper/c-stepper-43.md

MCPget_example("c-stepper-43")

Installnpx shadcn@latest add @reui/c-stepper-43

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Stepper Collapsible Sub-Steps

Dependencies

About Shadcn Stepper Collapsible Sub-Steps

What You Can Build With Shadcn Stepper Collapsible Sub-Steps

Composes Button, Collapsible, Frame, Separator, Stepper, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-stepper-43
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Stepper Examples

Basic Basic stepper
Completed State Stepper with completed state
Loading State Stepper with loading state
Controlled Controlled stepper
Labels Below Stepper with title and indicator
Left Aligned Titles Stepper with progress bar indicator
Icons & Badges Stepper with icons and badges
Descriptions Stepper with descriptions
Inline Titles Stepper with inline titles
Title & Caption Stepper with content for each step
Bar With Titles Stepper with progress bar and titles
Segmented Bar Stepper with segmented progress bar

Related Shadcn Component Categories

Switch
Open-source shadcn switch components for settings toggles, preferences, and binary choices.
Table
Open-source shadcn table components for admin tables, data display, and responsive lists.
Tabs
Open-source shadcn tabs components for segmented content, settings views, and dashboard sections.
Textarea
Open-source shadcn textarea components for comments, long-form input, and support tickets.
Time Picker
Open-source shadcn time picker components for booking forms, opening hours, and shift scheduling.
Timeline
Open-source shadcn timeline components for activity feeds, roadmaps, and event history.

Frequently Asked Questions

When should I use Shadcn Stepper Collapsible Sub-Steps?

Use it for numbered phases with a turning chevron, the open one boxed in a Frame that folds when picked again, its live task on a blue edge bar.

Shadcn Stepper as a whole fits:

Forms and setup flows split into numbered steps that people move back and forth through
Shipment, delivery and freight tracking shown as stops with times, ETAs and the leg underway
Incident, ticket, sales, proposal and review workflows laid out as stages, cards, rows or nested tasks

For phases on a right aligned rail where only the current one unfolds, use the Stepper Right-Aligned Sub-Steps example. For a finished screen that runs a billing, invoice or vendor task through numbered steps, use the Wizard blocks. For a complete first run account setup shown right after signup, with invites and goals, use the Onboarding blocks. For a storefront purchase that takes shipping and card details beside the cart total, use the Checkout blocks.

How do I install Shadcn Stepper Collapsible Sub-Steps?

Run npx shadcn@latest add @reui/c-stepper-43. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Stepper Collapsible Sub-Steps free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Stepper Collapsible Sub-Steps use?

It composes Button, Collapsible, Frame, Separator, Stepper. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.