shadcn.io is not affiliated with official shadcn/ui
No Subscriptions Empty State Block for Radix UI
A full-height first-plan screen for a billing tool: a name, a price and a Monthly or Yearly switch, a drawn plan card that previews them, and a worked-out line for ten subscribers, with a coin inside two arrows that turns solid when the plan is created.
Installation
Overview
Turn a blank plans page into the first subscription plan, with this no subscriptions empty state for React with Radix UI. It's the plans page of Cyclemint, a billing tool: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. In the middle of the band a greyscale drawing stands where a product's mark would: a coin inside two arrows that chase each other round it, the coin only dashed because there is no plan yet. Under the heading a Field with an Input names the plan, another sets its price, and a Segment Group switches it between Monthly and Yearly. A drawn plan card previews what you type, and a line under it works out, in whole cents, what ten subscribers would pay. The Shine Button, the only colored control, creates the plan: it is listed in a one-row list, the coin turns solid and the form locks until Start over. The band is ruled by Guides, and everything moves with CSS only. For a first-run screen in any subscription or membership product.
FAQ
What stays in the page, and how do I make it real?
Nothing leaves the page. The plan is a row kept in the page's state, the ten subscribers are a typed example, and the status line says "Nobody is billed." To wire it for real, create the plan with your billing provider where the code says so, list what it returns instead of the typed row, and keep the price you charge in whole cents on your side too.
How is the example worked out?
In whole cents, never in floating point: a price like 29.00 is 2900 cents, ten subscribers are 29000, shown as $290.00 a month. A yearly price keeps the same sum a year and adds the monthly equivalent rounded to the nearest cent (about $24.17 a month), so the line reads the same way whichever interval you pick. One number formatter writes every figure, in a left-to-right span, so the digits stay Western digits in a right-to-left page, and a keyboard that types Arabic-Indic digits is read as ordinary digits.
What is the plan card, and is it a control?
It is only a picture of the plan: the name, the interval chip, the price and a Subscribe look-alike that cannot be pressed. It fills as you type, with a dashed box where nothing is typed yet, and it is hidden from assistive technology because the line under it and the fields say the same things in words. The coin above it is one drawing whose classes change, so nothing swaps or moves.
Why does Create subscription look quiet at first?
A button that is simply disabled can't explain itself, so this one stays in the tab order and keeps its reason in the line above it: "Name the plan." or "Price like 29.00." Pressing it anyway, or Enter in a field, says the same in the status message, marks the field invalid and moves focus to it. Once both are right the line goes away and the button turns on.
Does the page change height when the plan is created?
No. The form stays where it is and is only locked until you press Start over, the list row is the same height empty or filled, and the button keeps its place with a new label. Start over clears the fields, puts Monthly back, dashes the coin again and moves focus to the plan name.
Is it usable with a keyboard and a screen reader?
Tab runs through the plan name, the price, the Monthly and Yearly choice (arrow keys move between them), Create subscription and Start over. The choice is a labelled radio group, the line under the button is tied to both fields, and one polite status message says what happened. After creating, focus moves to the new row in the list.