shadcn.io is not affiliated with official shadcn/ui
Stepper With Live Preview Block for React Aria
An invoice template designer where three steps (layout, typography, totals) restyle a drawn invoice sheet beside them as you choose compact rows, a typeface, a tax line and notes.
Installation
Overview
Show the effect of each choice while someone makes it with this stepper with a live preview for React with React Aria. A hairline frame with plus marks holds a narrow vertical Steps list (Layout, Typography and Totals) over the controls for the open step, and at the end a framed stage with a drawn invoice sheet. A Segment Group picks compact or comfortable rows, another picks serif or sans, and two Switch rows turn the tax line and the notes line on and off. The sheet restyles at once, and its small table works out the subtotal, the tax and the total from three sample lines in whole cents. A caption under it says what the sheet is showing. "Next" is the block's one Shine Button; on the last step it reads "Save template". On a phone the preview comes first at a reduced size and the rail becomes a row of numbers. For template builders, theme pickers and anything where seeing the result beats reading about it.
FAQ
Is the preview real?
It is a drawing with sample figures: the lines are typed in LINES, the amounts are in cents and the tax is a fixed percentage. The controls drive it through plain state, so replacing it with your own renderer means passing the same four values (layout, face, tax, notes) to it.
Do I have to follow the order?
You can go back to any step you have reached, and each control has a sensible default so a step never blocks the next. Add a check in the advance handler if one of your steps must be filled in first.
What stays local?
The template choices are component state and are lost on reload; "Save template" only shows a message saying nothing was stored. To keep them, send the four values to your API in the advance handler on the last step.
How does the keyboard work?
The rail is one tab stop on the current step, arrow keys move between reachable steps and Enter opens one. The segment groups use arrow keys too, and the switches respond to Space. Every change is spoken by the status line.