Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

SSO Add-on Pricing Billing Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show customers what stands between them and a paid add-on, with this single sign-on section for Solid 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.

How does it work with a keyboard and a screen reader?

Each row is read as met or not met followed by its title and its detail. Fix buttons keep their place when pressed, and a polite status message reports the number of checks still waiting and the result of enabling.

How does it look on a phone?

The mark and the text stay on the first line of each row and the Fix button sits under them. The bill band and the foot follow, and the foot with the Enable button stays pinned.