Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Animated Transitions Stepper Block for Vue

A four-step stage lighting plan whose circle growth, line fill, side-in panel and 40 ms staggered fields can all be turned off with a Reduce motion switch that starts from the system setting.

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

Show off the motion and let people turn it off, with this animated transitions stepper for Vue with Ark UI. A plus-marked panel holds a Steps line of four circles: Rig, Patch, Cue and Run. The current circle grows a tenth, the line between circles fills, each panel slides in from the side you are moving towards, and its parts rise 40 ms apart. A Switch labelled Reduce motion turns all of it off in this block, and it starts from your system setting, read once after the page loads. The steps hold a Radio Group of rigs, a Select of universe, a second radio group of looks and a Data List run sheet, and the foot has the block's one Shine Button.

FAQ

What does the Reduce motion switch change?

It sets one attribute on the block's root, and every transition in the block has a variant that reads it: the circle stops growing, the line stops animating, panels appear without sliding and the staggered parts appear together. The system setting does the same through the motion-reduce: variants, so someone who has asked for less motion gets it even before the switch is read.

Which way do panels slide?

Forward moves slide in from the end side and Back moves slide in from the start side, and both flip in a right-to-left layout. The direction is kept in state and set by the last move.

How do I change the 40 ms stagger?

RISE lists one delay class per position in a panel, and riseOf adds it to the transition classes. Change the values there, or add an entry for a fifth part.

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

Everything. The choices and the motion setting live in component state, so the setting resets when the page reloads. The last button ends on a card that says "Built in this demo". To keep the preference, store the switch value in your own settings and pass it as the initial state.

What does the status line say?

After a step change it says "Step 3 of 4: Cue". After the switch changes it says "Motion is off in this block" or "Motion is on in this block". Nothing is announced on load, even when the system setting turns the motion off.

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, Home and End jump to the first and last, and Enter or Space opens the focused one. Later steps are off until you reach them with Continue.

All 100 stepper blocks