shadcn.io is not affiliated with official shadcn/ui
Subscription Tier Benefits Billing Block for Ark UI
Pro's six benefits as ruled rows marked Used or Not yet used, a progress ring counting them, and one button that sets up the first benefit still unused.
Installation
Overview
Show a customer what their plan gives them and how much of it they use, with these subscription benefits for React with Ark UI. It opens with the account of Mosscraft, a design-asset library, on Pro at $29.00 a month. A hairline frame with a plus mark on each corner starts with a ring, a decorative Circular Progress that counts 3 of 6 benefits used, beside the one primary: a Shine Button that sets up the first benefit still unused, Custom domains, and changes its label as the list changes. Under it six ruled rows name each benefit (advanced analytics, priority support, custom domains, API access, an audit log and CSV export) with a line on what it does, a Badge that says Used or Not yet used beside a glyph, and a ghost Button that marks the benefit as set up or takes it back. The ring, the counts and the primary follow every change. On a phone the badge and the button sit under each benefit's name. It's built from Circular Progress, Badge, Button, Shine Button and Guides, with a CSS entrance only. For billing settings, plan pages and any subscription app that wants customers to use what they pay for.
FAQ
How do I fill it with my plan's benefits?
Edit BENEFITS (an id, a name and a one-line note) and USED_START, the ids already in use when the page loads. Build both from your own data: the benefits your plan includes and, for each, whether the account has used it, such as a domain connected or an API key created. The ring's percentage, the counts and the primary's label are all derived from that one list.
What does the main button do?
It sets up the first benefit that is not yet used, in the order of the list, so pressing it three times works through Custom domains, the audit log and CSV export. When every benefit is in use it reads Every benefit is in use and waits. In your app make it link to the setup step of that benefit instead of marking it.
What stays local, and what does a row's button do?
Marking is local: a row's button flips between Set up and Undo in the page and says so, for example "Custom domains marked as set up in this demo." in a polite status message. Nothing is configured or sent. The same button takes the mark back, which keeps focus on it. In your app, send people to the real setup and read Used from your records.
Is the ring accessible?
The ring is decorative and hidden from assistive technology; the same count is written out in text ("3 of 6 used") and in the status message. Used and Not yet used are words with a glyph, never only a tone, and each row's button is named for its benefit ("Set up Custom domains"). The ring draws on first paint and stays still under reduced motion.