shadcn.io is not affiliated with official shadcn/ui
SSO Add-on Pricing Billing Block for Svelte
A single sign-on add-on at $99 a month behind three prerequisites (Business plan, a verified domain, two admins), each with a Fix button, and an Enable button that says what it is waiting for.
Installation
Overview
Show customers what stands between them and a paid add-on, with this single sign-on section for Svelte with Ark UI. A hairline frame with a plus mark on each corner starts with the add-on and its price, then lists three prerequisites as ruled rows: a Business plan or higher, a verified domain and at least two admins. Each row says where the account stands, with a filled mark once it holds, and has an outline Button that fixes it in this page, which then reads "Done" and stays in place. A band works out what the add-on adds to the monthly bill, including the plan upgrade once it is in. The Shine Button, "Enable single sign-on", is the only colored control: it stays disabled for assistive technology until every row passes, its status line says "Waiting on 2 checks", and pressing it early moves focus to the next Fix button. Once all three pass the line gives the date billing starts and the monthly total. For paid add-ons that need something set up first.
FAQ
How do I change the add-on, the checks and the prices?
Edit PRICE, CHECKS (a title, the words while it waits and when it passes, the Fix button's label and what the fix adds to the bill), START for the checks that pass when the page opens, and AS_OF for the date billing would start.
How does the gate work?
The Enable button is marked as disabled but stays focusable, so a keyboard user who presses it hears what is missing and lands on the next Fix button instead of finding a dead control. When all three checks pass it enables and the status line gives the date and the total.
What stays local, and how do I wire the buttons?
Every Fix button and Enable only change state in this page: nothing is upgraded, verified, invited or enabled, and nothing is billed. To make it real, call your plan, domain and invitation services from fix, and your billing provider from enable, and read each check back from the account.
What does Start over do?
It puts the page back as it opened, with only the domain verified, so you can try the gate again. It is part of the demo, not of a real billing screen; remove it when you wire the block to an account.