shadcn.io is not affiliated with official shadcn/ui
Trial Expired Error Block for Svelte
A full-screen page for a trial that has ended: what the trial built, how long the data is kept with a bar for the days used, a real export, and two plan cells whose button names the plan you picked.
Installation
Overview
Show people their work is safe and what choosing costs, with this trial expired page for Svelte with Ark UI. It's the screen of Plotsprig, a content planner, a whole screen with the page's rails and one band across it. Under the heading, three cells on shared hairlines count what the trial built (boards, teammates, exports), framed by Guides. A line says the data is kept until Nov 10, 2026, with a Progress bar for the days used against a typed date, and Export my data is a Download Trigger that saves a real typed file of the boards. Two plan cells (Starter and Pro, with prices in whole cents) are native radio buttons, and each says whether it seats the 8 teammates. The Shine Button names the plan you picked, Choose Pro or Choose Starter, and Undo takes a choice back. It's built from Progress, Download Trigger, Button, Shine Button and Guides, with a CSS entrance only. For any product that ends a free trial and keeps the data for a while.
FAQ
Where do the days and dates come from?
From three typed ISO dates and one constant: the day the trial ended, "today" for the page and the retention length. The kept-until date, the days used (3 of 30) and the days remaining are all derived from them with UTC arithmetic, never from the visitor's clock, so the server and every browser print the same thing. Change TRIAL_ENDED, AS_OF and KEPT_DAYS to your own, or pass real values from your account API.
What does Choose Pro do, and what stays in the page?
It records the choice in the page's state and says "Pro chosen in this demo. Nothing was charged." Undo takes it back, and picking the other plan clears it, because it is a different choice. A second press on the same choice says it is already recorded. To wire it for real, start the subscription with your billing provider where the code says so, and send the visitor to its hosted checkout; the page never takes a card number.
How does a plan cell know whether it fits?
Each plan has a typed seat limit, and the line under it is derived: Starter seats 3 of your 8 teammates, Pro seats all 8. Nothing is stored twice, so changing the teammate count or a limit changes the sentences. The cells are native radio buttons in one group, so the arrow keys move between them and the focus ring follows.
What does Export my data download?
A real file: plotsprig-boards.json, built at module scope from the typed boards and written by the Download Trigger when you press it. In your product, point it at your export endpoint, or generate the file from the account's data on request; keep it available for as long as the retention line promises.