shadcn.io is not affiliated with official shadcn/ui
Pause Until a Date Subscription Dialog Block for React
A subscription page with its pause dialog shown open: pick the day billing starts again on a calendar or with a chip for four weeks or the new year, and the sentence under it gives the resume date, the renewals skipped and what they would have cost.
Installation
Overview
Pause a subscription until a date the customer picks, with this dialog for React with Base UI. It opens from the Subscription page of Larkspur Coffee Club: the page's header holds an outline Pause Button, and the page itself is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The dialog holds two quick picks, four weeks and until 1 January, and a Calendar that closes every day before a week from now and after ninety days. The sentence under it follows the date: when billing resumes, how many renewals are skipped and what they would have cost, and that the order history stays available. Pause until a date, the only Shine Button, keeps the pause, closes the dialog and hatches the next renewal in the drawing. For preview the dialog is drawn open in place when the page loads; the Pause button opens the real Dialog, with the same calendar and the same date. For coffee, meal-kit and box subscriptions and any plan that can sleep.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that is not modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Pause button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same PauseFields component and share the block's state, so a date picked in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How are the allowed days and the renewals worked out?
AS_OF is the day the page treats as today. The first allowed day is a week after it and the last is ninety days after it, both computed in UTC from the ISO date, so every visitor sees the same window. RENEWALS lists the dates still ahead, and a renewal is skipped when it falls before the resume date. The count and the money come from that list and PRICE, so changing a date changes both. Check the same window on your server.
How does the calendar differ per library?
What stays local in the demo, and how do I wire it?
Pause until a date keeps the date in the page, closes the dialog, changes the header to "Paused until…" and says in a polite status message that nothing was scheduled. No request goes out and nothing is charged. In your app send the resume date to your billing provider in pause, keep the dialog open and show its reason if it refuses, and update the host from the response.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts on the first quick pick and stays inside until it closes, and Escape, Cancel and the close button return focus to Pause. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The quick picks are toggle buttons that stay pressed while their date is chosen. The copy shown on load moves no focus.