shadcn.io is not affiliated with official shadcn/ui
Accounts On Your Domain Account Block for React
The accounts that use an address on a verified domain: a table with initials, name, address and state in words, a box on each personal account, one button that invites the chosen ones to be managed and a radio group for new sign-ups.
Installation
Overview
Show a workspace owner who already signs in with their company address and let them bring those accounts under management, with this domain accounts panel for React with Base UI. The domain is already verified, so the panel opens with one line that says so and the day. Under it, a native table lists the seven accounts that use an address on the domain: initials, name, address and a state as a dot and a word, Managed, Personal account or Invited. A Checkbox in each personal account's row picks it, and the header's Shine Button is the only colored control: it names how many are chosen ("Invite 2 to be managed") and moves them to Invited. Under the table, a group of three radios says what happens to new sign-ups on the domain, Managed automatically, Ask them or Leave alone, with the effect of each written out. The sentence over the panel counts how many accounts are managed from the rows. It's built from Checkbox, Shine Button, Button and Guides, with native radios and a CSS entrance only. For admin pages and any app where a company domain can claim its people. Verifying the domain itself is settings-custom-domain.
FAQ
How do I fill it with the real accounts?
Edit PEOPLE: an id, the name, the email, two initials and a status (managed, personal or invited), and DOMAIN and VERIFIED for the line at the top. The managed count and the invite button's number are worked out from the rows and the ticked boxes. Take the list from your directory by the domain of each account's verified address.
What stays local, and how do I make it real?
Everything: Invite moves the chosen rows to Invited in this page's state and the status line says nothing was sent, and the sign-up choice only changes a radio. To wire it, send the invitations from invite and change a row only when each one is accepted by your server; save the sign-up rule from choosePolicy and show a failure in the same status line.
Why do only personal accounts have a box?
A managed account is already yours and an invited one is waiting on a reply, so there is nothing to choose for either. Only a personal account can be invited. With none ticked the button is quiet and says "Invite to be managed"; pressing it tells you to tick one first.
What do the three sign-up choices do?
Managed automatically puts a new person under your sign-in rules on their first sign-in, Ask them shows them a request to join as managed that they can decline, and Leave alone lets them sign up as a personal account without telling you. Each card says its effect in a sentence, and the status line repeats the choice you made.
How does it look on a phone?
The table keeps its three columns at 320 pixels wide, with the address under the name and truncating, and the state in a narrower column. The three sign-up cards stack one across and the foot with the status line stays pinned to the bottom of the screen.
Is it accessible?
The table has a caption, column heads and the person's name as each row's head; every checkbox is named for its person, and state is a word as well as a dot. The sign-up choice is a native radio group with a legend, so arrow keys walk it. The status line is a polite live region present from the start.