shadcn.io is not affiliated with official shadcn/ui
Team Seats Billing Block for React Aria
A team roster where removing a seat is scheduled for the renewal: Remove seat marks Seat ends with Undo, a pending invite can be cancelled, and the bill is worked out for today and for the renewal.
Installation
Overview
Show that taking someone off a plan does not refund the period, with this team seats section for React with React Aria. A hairline frame with a plus mark on each corner holds a native table of the team: an initials Avatar, a name and email, a role, when the person was last active and the state of their seat. Every row has a ghost Button that says "Remove seat". Pressing it marks "Ends 12 Nov" and the same button becomes Undo, so focus stays where it was. A pending invite is a row of its own, with no seat yet and a button that cancels it. Under the roster the bill is worked out twice: today, and from the renewal once the marked seats end, with a line saying that removed people keep access until then. A Shine Button saves the changes, the only colored control, and Discard returns to the saved ones. On a phone the table becomes a list of the same rows. For team plans and any per-seat product that renews on a date.
FAQ
How do I change the people, the price and the renewal date?
Edit PEOPLE (a name, email, initials, role, the day each was last active and whether the row is a pending invite), SEAT_PRICE, RENEWAL and AS_OF. The owner's seat can't be removed, and "Today" and "Yesterday" are worked out from AS_OF, never from the clock.
Why isn't the seat removed right away?
Because the period is already paid for. The example schedules the end for the renewal: the person keeps access until then and the bill drops from that date. If your plan refunds or ends access at once, change the two lines under the roster and the rule in save.
What stays local, and how do I wire the save?
Save only keeps the marks in this page and says "Scheduled in this demo." Nothing is sent and nobody loses access. To make it real, send the ids of the marked seats and the cancelled invite to your billing provider in save.
Can I take it back?
Yes. Undo is the same button as Remove seat, so it works with the keyboard from where you are. After saving, taking a mark off is a new change that has to be saved too, and Discard returns to the last saved state.
How does it work with a keyboard and a screen reader?
The table has a caption and column headers, every row is read as a person, and each button is named for its row ("Remove seat for Ravenna Ostrander", "Undo removing the seat of Ravenna Ostrander"). A polite status message reports the unsaved changes and the result of saving.