Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Keyboard Nav Stepper Block for Vue

A four-step pipeline builder with a legend of its keys, 1 to 4, N, B, arrows and Home and End, a heavier focus ring and a status line that reads the last key 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

Teach a flow's keyboard model where people can see it, with this keyboard-driven stepper for Vue with Ark UI. A hairline frame with plus marks holds a Steps line of four numbered circles (Source, Transform, Validate and Output), all open, a legend of the keys built from Kbd caps, a panel per step with a Data List of its settings, and a foot with Back and the block's one Shine Button. While focus is inside the block, 1 to 4 open a step by number, N goes forward and B goes back; the arrow keys, Home and End move focus along the line and Enter opens the focused step. Focus rings are heavier here, and the polite line reads the last key back: "Last key: 3, Validate". On a phone the legend folds into a "Keys" Collapsible. For editors, builders and tools used by power users.

FAQ

Where do the keys work?

Only while focus is inside this block. The listener is attached to the block, in the capture phase so the buttons cannot swallow a key, and it ignores a key held with Ctrl, Command or Alt and anything typed in a field. Nothing is bound on the page or the window.

How does the last-key line work?

Each handled key writes what it did into the state that also holds the step, and the polite line shows it. For the arrow keys, which the stepper handles itself by moving focus, the block waits one frame and reads which step now holds focus. Pressing a circle with the pointer clears the line back to "Step 3 of 4: Validate".

What happens in right-to-left languages?

The arrow keys follow the reading direction, so Left moves forward in Arabic or Hebrew. The legend names the physical keys, and the digits, N and B are the same everywhere. The legend is written in left-to-right so the key caps stay in order.

What stays local?

The step and the last key are component state, and nothing runs: the last step ends on "Pipeline saved in this demo". Wire your own save call into the Shine Button's handler.

How does it look on a phone?

The line shows numbers only, with the step's name under it, and the legend is a closed "Keys" disclosure that opens in place without moving the rest of the page.

How do I add a step or a key?

Add an entry to STAGES for a step, and to KEYS for a legend row; the digit keys are checked against the number of steps, so the legend and the shortcuts only need STEP_KEYS updated to match.

All 100 stepper blocks