shadcn.io is not affiliated with official shadcn/ui
Animated Pulse Timeline Block for Radix UI
A residence permit application as seven events on a rail, one of them waiting on you with a ring that pulses three beats and rests and a wait counted in days, and a single button that marks the passport copy as sent, adds a dated event and moves the focus on.
Installation
Overview
Make the one thing that is waiting on the person impossible to miss, and let them say they have done it, with this animated pulse timeline for React with Radix UI. It is written for Permitlark, a fictional permit service. A hairline frame with a plus mark on each corner holds the seven events of a residence permit application on a vertical rail: Application submitted, Fee received and Documents checked are done, the passport copy is waiting, and the appointment, the decision and the card in the post are dashed because they have not happened. The waiting node says "Waiting on you: passport copy" and "Waiting 6 days", counted from 8 Oct to 14 Oct, and its ring pulses three beats and then rests; the pulse is never the only signal, and it is off under reduced motion. The one primary button, "Mark the passport copy as sent", stops the pulse, adds a dated "Passport copy marked sent" event that fades in and makes the appointment the next node, and the status line says nothing was uploaded and swaps the button for Undo. The panel keeps its height before and after. It is built from ShineButton, Button, Badge and Guides, with an entrance only. For applications, claims, verification flows and any record where one step needs the person. The application is example data.
FAQ
How do I change the events?
Edit the items in BEFORE and AFTER. Each has an id, a title, a note, a phase of done, waiting, current or ahead, and an ISO time once it has happened. The wait in days is worked out from ASKED_AT and AS_OF.
How does the pulse work, and can I turn it off?
It is a CSS ring that expands and fades three times and then stops, sitting behind the node so nothing is left on screen when it ends. Users who ask for reduced motion do not see it at all. The words and the ring around the node say the same thing without it.
What does the button do?
It switches the demo into its sent state: the waiting node becomes a done event, a new dated event appears, the appointment becomes the current node and the status line says "Marked in this demo. Nothing was uploaded." Undo goes back. A real upload belongs in your own page, behind a file field and a server action.