shadcn.io is not affiliated with official shadcn/ui
Organization Settings Account Block for Ark UI
What it means that an employer manages an account, written for the person it belongs to: six things admins can or cannot do, the facts, and a way to leave that asks for the export first and the company's domain.
Installation
Overview
Tell people plainly what their employer can do to their account, with this managed-account panel for React with Ark UI. A hairline frame with a plus mark on each corner holds two cells side by side, split by a divider. At the start is a ruled list of six things: four your admins can do, reset your password, see your sign-in history, sign you out everywhere and suspend or delete the account, and two they cannot, read your private notes and see your passwords, each marked Can or Cannot with an icon and the word in an outline Badge, never a colour. At the end are the facts, who manages the account, the domain, since when and who to ask, and an outline Button that leaves the company and keeps a personal account. It opens an Alert Dialog that says export comes first, offers a real download of the data, and keeps its action disabled until the company's domain is typed. Leaving flips the panel to its personal state, and Undo brings the employer back. There is no Shine Button: the only action is that confirm. It's built from Alert Dialog, Badge, Button, Download Trigger, Field, Input and Guides, with a CSS entrance only. For the account page of any app sold to companies.
FAQ
How do I fill it with my company's rules?
Edit POWERS (an id, a label, a few words of hint and admin, whether admins can do it) and the constants at the top: EMPLOYER, DOMAIN, DESK for the contact and MANAGED_SINCE. The counts "4 can, 2 cannot" are worked out from POWERS, and the dates are fixed ISO days with AS_OF as today, never the clock. Keep the list true: it is a promise to the person, so list only what your admins really can and cannot do in your product.
What stays local, and how do I make leaving real?
Everything. Confirming flips this page to its personal state and says so in the foot; nothing is sent, no account changes and your employer is not told. Undo brings the employer back, which a real service usually can't do without an invitation. To make it real, call your endpoint in confirm, flip the page only when it answers and show a failure in the status line. Decide on the server what happens to shared data, and whether the person keeps the same login.
What does the download contain?
A small JSON file built from typed data in the page, with the account, who managed it, the day and a note on what stays with the company. It is a real file from DownloadTrigger, but it is a stand-in: replace exportText with a call that prepares the person's actual data, ideally one that shows progress, and keep the button above the confirmation so export always comes first.
How does the confirmation work?
Leave and keep a personal account opens an alert dialog. Focus starts on Stay, Escape closes it and focus returns to the button. The action stays disabled until the company's domain is typed exactly, case aside, and the field is marked invalid while what is typed doesn't match. After you confirm, the button stays where it was and becomes "Your account is personal", so focus never leaves it.
How does it look on a phone?
The two cells stack, the list first and the facts and the button under it, and the divider becomes a rule. The facts put each name above its value so a long address never overflows. The status line and Undo sit in the foot of the panel. The list rows keep one height, so flipping to the personal state never moves anything.
Is it accessible?
The list is a real description list: every capability is a term and Can or Cannot is its definition, written as a word with an icon. The facts are a description list too, addresses keep their reading order in a right-to-left page, the dialog is announced as an alert dialog and the status line is a polite live region present from the start.