shadcn.io is not affiliated with official shadcn/ui
Role Permissions Pricing Billing Block for Vue
A matrix of billing permissions by role (Admin, Billing, Member) with the seat price and head count of each role, and a button that moves one person to a free Billing seat to show what it saves.
Installation
Overview
Show what each role can do and what it costs, with this roles and seat prices section for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a native table: six billing permissions down the side (view invoices, download receipts, change plan, update payment method, invite members, delete workspace) and three roles across the top, each cell a check or a minus with the word beside it. A row under the role names gives the seat price of the role ($12.00, $0.00, $8.00) and how many people have it. Below, the team's bill is worked out from those counts, with the total rolling with Sliding Number, and a ghost Button moves one person from Member to a Billing contact so the saving appears. A Shine Button saves the roles, the only colored control. On a phone the matrix becomes Tabs, one for each role, listing what the role can do. For team plans where roles change the price of a seat.
FAQ
How do I change the roles, the permissions and the prices?
Edit JOBS (an id, a name, the seat price and the head count of each role), PERMISSIONS (a name, a hint and the ids of the roles that can do it) and MOVER for the person the button moves. The matrix, the counts and the total are all worked out from them.
How is the monthly total worked out?
It is the head count of each role times its seat price, added up: 3 Admins at $12.00, 1 Billing contact at nothing and 9 Members at $8.00 is $108.00 a month. Moving one Member to Billing makes it $100.00. Check the prices against your plan before you show them to customers.
What stays local, and how do I wire the save?
Save only keeps the move in this page and says "Roles saved in this demo." Nobody's role really changes and nothing is sent. To make it real, send the person's id and new role to your backend in save, and read the counts back from it.
Can the matrix be edited?
No. It shows fixed permissions of fixed roles, as a reference for what a seat gets. The one thing you can change is who holds which role, through the button, and the counts, the total and the saving follow.
How does it work with a keyboard and a screen reader?
The table has a caption, column headers for the roles and row headers for the permissions, and every cell says "Can" or "Cannot" in words as well as with an icon. The tabs on a phone move with the arrow keys, and a polite status message reports unsaved changes and the result of saving.