shadcn.io is not affiliated with official shadcn/ui
License Activation Success Block for React Aria
A license confirmation inside an account panel: the plan with its key masked and a button that copies it, the date it runs to, seats in use against seats bought, and a table of what the license includes.
Installation
Overview
Confirm a license key in your app's account area with this activation panel for React with React Aria. It's the panel Waveloft Studio, audio software, shows after a key is activated: a compact header with one action, the Shine Button to manage seats, over one framed card of three bands ruled by Guides. The first band gives the plan with an outline Badge, the key masked in monospace with a Copy Button that really copies the whole sample key, and the date it runs to. The second shows the seats in use against the seats bought, as a figure, a Progress bar and the free count, all worked out from two numbers. The third is a table of what the license includes, each feature a check or a bar with the words "Not included" and its limit. It's built from Badge, Copy Button, Progress, Shine Button and Guides, with a CSS entrance only. For software licenses, seat-based plans and any activation screen.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was activated: the key is a made-up sample, and the seats and features are typed in LICENSE and ENTITLEMENTS. The one live control is the copy button, which really puts the whole key on the clipboard and says so in a polite status message, with the words "It is a sample key". To wire it, fill LICENSE from your license server (plan, key, expiry, seats bought and in use) and ENTITLEMENTS from the plan's feature list, and send the Shine Button to your seat management. Keep the real key out of the page's HTML if it's secret: show it masked and fetch it when the user presses Copy.
How is the key masked, and why in monospace?
A helper keeps the first and last group and hides the groups between ("WLFT-••••-••••-••••-8J3N"), enough to recognise a key by without showing it. It's set in a monospace code element with a left-to-right direction, so the groups and the hyphens never reorder in a right-to-left layout, and on a narrow screen the Copy button drops under it rather than the key being cut.
Where do the seat figures come from?
Two numbers: the seats bought and the seats in use. The headline "12 of 50", the free count and the bar's share (24%) are all worked out from them, so changing either updates all three. The bar is decoration and is hidden from assistive technology; the figure beside it says the same.
How does the table read on a phone?
Below the small breakpoint the Limit column goes and each limit is written under its feature's name, while the Included column keeps its check or bar and only the icon shows (the words stay for assistive technology). Above it, all three columns show. The table has a caption and the feature names are its row headers.