shadcn.io is not affiliated with official shadcn/ui
Scheduled Actions Account Block for Radix UI
A vertical timeline of what an account will do on its own, with days away worked out against an as-of day, one action per row (Extend 30 days, Postpone 14 days, Cancel deletion) that Undo reverses, and a collapsed list of what already happened.
Installation
Overview
Show people what is about to happen to their account with this scheduled actions panel for React with Radix UI. A compact header holds the title and one sentence, and inside a hairline frame an as-of band says As of 14 Oct 2026 over a rail of four upcoming changes: a deploy token expires, a trusted device expires, the password expires and a deletion grace ends. Each row gives the day, how many days away it is, a sentence on what follows and one action: Extend 30 days, Postpone 14 days or Cancel deletion. Using an action moves the date (or cancels it), the rows follow their new order, and the same button becomes Undo. A closed Collapsible at the foot lists what already happened. It is built from Button, Collapsible and Guides, with a CSS entrance only. For the account page of any product that expires things.
FAQ
How do I fill it with my own schedule?
Edit UPCOMING and PAST at the top. An upcoming item has an ISO due day, the verb (Expires or Ends), the action label, the days it moves the date (0 for a cancel), the kind and the sentence done that replaces its subtitle once used. AS_OF is the typed day that stands for now, so the days away and the order never read the clock.
How are the days away worked out?
From the typed ISO dates with Date.UTC, whole days between the as-of day and the due day: today, tomorrow, or in N days. Extending moves the due day forward by the action's days, so the words and the order update with it. Rows are sorted by their current day each render.
What does Undo do?
The button that applied an action is the one that undoes it: its label changes to Undo and its accessible name says which action it reverses, so one tab stop never moves. Focus stays on that button after the rows reorder. A cancelled deletion shows Cancelled, your account stays, and Undo brings the scheduled day back.
What stays local in the demo?
The dates. Every action changes the page's state and says so in the polite status line, and nothing is sent. In your app call your server in act and return the new due day, then store it.