Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Tree Branch Stepper Block for Vue

A vertical trunk with five stages of a runner-bean season hanging off it on curved branches, alternating sides, with a panel saying what to do and one Shine Button to log it.

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

Hang a season on a trunk with this tree-branch stepper for Vue with Ark UI. A hairline frame with a plus mark on each corner holds one vertical trunk with five stages of a runner-bean season: Seed, Sprout, Growth, Bloom and Harvest. Each stage hangs off the trunk on a short curved branch, alternating start and end side, and on a phone every node sits on the same side. A logged stage is a solid node with a check, the stage you are in is outlined and marked "Now", and the rest are plain. Each node is a real Steps button, so a logged stage can be reopened. A Data List under the tree gives the window, the job and the sign to go on, and "Log this stage" is the block's one Shine Button. For seasons, programmes and plans that branch out of one line.

FAQ

How do I change the stages?

SEASON lists the five stages with an id, title, window, a sentence, the job and the sign to go on. To add a stage, add it to SEASON; the trunk, the panels and the counts follow, and the side each node sits on comes from its place in the list.

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

Everything. The stage is component state and the last step ends on "Season logged in this demo": nothing is saved and no reminder is set. To make it real, call your API from the advance handler with the bed and the stage you are logging.

How are the branches drawn?

Each branch is a small SVG curve inside the node, drawn from the node to the trunk. It is flipped for the nodes on the end side and in right-to-left, so it always reaches the trunk. The trunk is one pseudo-element line down the middle, or down the start edge on a phone.

Does it work right to left?

Yes. Sides are logical, so the first node sits on the start side whichever way the page reads, and the branches and the check are placed with the same sides.

How does the keyboard work?

The trunk is one tab stop on the current stage. Up and Down move focus between the stages you can reach, Home and End jump to the ends, and Enter or Space opens the focused one. After a move the stage heading takes focus and a polite line reads "Stage 3 of 5: Growth".

How does it look on a phone?

The trunk moves to the start edge and every node hangs off it on the same side, one under another, so nothing is squeezed into half a width.

All 100 stepper blocks