shadcn.io is not affiliated with official shadcn/ui
Success Failure Stepper Block for Radix UI
A static-site deploy in four steps that ends on a success or failure result card, with a demo control to preview either and a Retry deploy that recovers.
Installation
Overview
Give a flow a clear ending with this success and failure stepper for React with Radix UI. A plus-marked frame holds a Steps rail of four steps for a static-site host (Build, Test, Upload and Go live) and a narrow result card at the end. The last ring becomes a drawn check or a drawn cross. Success reads "Live in this demo" with the build time and file count and a button that copies the site address; failure reads "Upload failed at file 41 of 118" with a log excerpt, and "Retry deploy", the block's one Shine Button, runs again and succeeds. A labelled "Preview outcome" control, marked demo only, picks the result the deploy ends in.
FAQ
What is the Preview outcome control for?
It is demo only: it picks whether Go live ends in success or failure so you can see both. Change it after a deploy and the result switches at once. In a real product you would drive verdictOf from your deploy status instead.
What does Retry deploy do?
It waits RETRY_WAIT milliseconds with the button loading, then marks the run recovered and shows the success result. Focus moves to the result heading.
What stays local?
Everything. Nothing is built, uploaded or published, and the copy button copies a fictional address to your clipboard only.
How is the result announced?
By the one polite status line, which reads "Live in this demo" or "Upload failed at file 41 of 118". The glyph is a check or a cross beside the word, so colour never carries it.