shadcn.io is not affiliated with official shadcn/ui
User List Role Guard CRUD Block for Solid
A coworking space's member table with a role select that changes at once and offers Undo, an Invite popover, a pause switch, a Remove that asks first, and a last-admin guard that explains itself.
Installation
Overview
Give a member desk the controls an admin needs and one rule they can't break, with this user list for Solid with Ark UI. A table of eight members, each with an initials avatar, name and email, plan, a role Native Select, a status Badge, a pause Switch and a Remove button, sits under a toolbar with a search Input and a role filter; below the medium breakpoint every member is a card. Choosing a role changes it at once and the foot says "Role of Noor Haddad is now Manager." beside an Undo. Invite, an outline Button in the header, opens a Popover with an email and a role: it adds an Invited row dated as of 14 October, the email shape is checked and a duplicate says "Already a member"; Send invite is the only Shine Button. The switch pauses a member (the word Paused, reversible). Remove asks in an Alert Dialog that says what goes with the member. The last Admin's role, pause and Remove are aria-disabled with the reason "Keep at least one admin" in the row, and pressing one says it in the polite line. For member desks, team pages and any list with a rule that protects the owner.
FAQ
How do I fill it with my members?
Edit PEOPLE: each has an id, a name, an email, a plan, a role of Admin, Manager or Member, a paused flag and, for someone only invited, the ISO day in invitedOn. The counts, the status words and the guard are all derived from that list; the as-of day is the constant AS_OF, so no date reads the clock.
How does the last-admin guard work?
When exactly one active Admin remains, their role select, pause switch and Remove button are marked aria-disabled, not disabled, so they stay in the tab order. The row shows "Keep at least one admin" with a lock, and using any of the controls changes nothing and puts the same reason in the polite status line. Make another member an Admin and the guard lifts at once.
Is a role change really undoable?
Yes, the last one. Changing a role stores the list as it was; Undo in the foot puts it back and says so. Pausing, inviting and removing replace that Undo, and Remove has its own confirmation instead, because it takes the member's plan with it.
What does Invite do, and what is checked?
The popover asks for an email and a role. An address without the shape of an email, or one already on the list, is refused with its reason in a slot that keeps its height and keeps the focus in the field. A valid one closes the popover, clears the search and filter, adds the member at the top as Invited with a date and moves focus to the new row's role. Nothing is sent; the polite line says so.
What stays local, and how do I wire a real save?
Members live in state in this tab and a reload restores the eight; no email is sent and nothing is removed anywhere. In your app call your API from changeRole, pause, remove and invite, keep the guard on the server as well as in the interface, and show a refusal in the polite line. Undo should call a restore endpoint.