shadcn.io is not affiliated with official shadcn/ui
No Permissions Empty State Block for React
An access-control tool's empty rules page: a preset strip over a real matrix of checkboxes (Projects, Docs and Billing by Create, Read, Update and Delete), a count, a Save rules foot, and a garden gate that opens as you allow more.
Installation
Overview
Turn "nobody can do anything yet" into a grid you fill in, with this no permissions empty state for React with Base UI. A hairline frame with a plus mark on each corner holds the access rules of Stilehouse, an access-control tool. A Toggle Group of presets (None, Read only, Editor, Admin) sits over a real table: a row each for Projects, Docs and Billing, a column each for Create, Read, Update and Delete, and a Checkbox in every cell. A preset fills the matrix and stays lit while the cells equal it; ticking a box by hand takes the light off, and "7 of 12 allowed" counts as you go. Beside the table a garden gate stands on a path: shut and the path dashed while nothing is allowed, then opening further with every box you tick. The foot counts what is not saved yet and holds the Shine Button, the only colored control, with a Discard beside it. The frame is ruled by Guides, the gate is one SVG whose classes change, and the transitions are CSS only. For the roles and rules page of any admin tool.
FAQ
What stays in the page, and how do I make it real?
The rules live in the page's state: reload and nothing is allowed, and Discard goes back to what was last saved in the page. Save rules keeps them in the page and says "Saved in this demo"; nothing is stored or sent. To wire it for real, post the list of allowed cells (each is a row and a column, such as docs:update) to your API where the code says so, and load the saved list as the starting state.
How do the presets work?
A preset is a list of cells. Choosing one replaces the matrix with it, and the preset stays pressed only while the matrix equals it exactly, so changing one box takes the light off all four. Pressing the lit preset again does nothing, because the matrix already is that preset. Edit the PRESETS list for your own: Editor can create, read and update Projects and Docs and only read Billing, which is 7 of the 12 cells.
How is each checkbox named?
By its row and its column together, such as "Projects Create", by pointing the box at the two header cells it sits under, so a screen reader hears the same words a sighted visitor reads. The table has a caption, real headers and a row header in each row. It is a native table on every base, so ordinary Tab and Space work, and with the same names.
Is the gate anything but decoration?
No. It is hidden from assistive technology; the same facts are in the count above the table, the heading and sentence beside it ("The gate is ajar: only what you ticked gets through") and the foot's status line. The gate leaf swings by how many of the 12 boxes are ticked, and the path to it is dashed only while the count is 0.
What does the foot say?
One polite line, with this priority: how many changes are not saved yet ("3 changes not saved yet."), then the last result ("Saved in this demo."), then what is saved. Save rules and Discard stay in the tab order when nothing changed and answer "No changes to save." instead of doing nothing.
How does it look on a phone?
All four columns stay, each as narrow as its word, with the row hints dropped, so the matrix never scrolls sideways even at 320 px. The foot pins to the bottom of the screen while the panel is in view, so Save rules is always in reach, and the gate and its sentence sit under the matrix.
Related
- Pro
No Roles Empty State
Team and accessAn access-management tool's first-role page: a name field, five permission switches, a sentence that rewrites itself, and a key ring whose next free tag is dashed and shows the role you are building.
- Pro
Permissions Account
Shared accessA read-only matrix of what each role may do: permissions in four folding groups against four roles with counts, your own role framed and marked You, and a Request button on what it lacks.
- Pro
Permission Changes Changelog
Security and auditsAn audit of permission changes as diffs in an inset frame: each role with who changed it and when, inserted and struck-out permission rows with a sign and a word, how many people it reaches, and a toggle group that keeps only granted or revoked rows.
- Pro
Notification Preferences Settings
NotificationsA notification settings panel: a channel strip with all-or-nothing checkboxes, a matrix of switches by activity and channel with a locked security email, quiet hours, and a save bar that counts unsaved changes.
- Pro
No Audit Trail Empty State
Team and accessA compliance tool's empty ledger: retention policy radio cards beside a vault door whose dial turns to the choice, and an empty table of Time, Actor, Action and Resource whose first row is written when the policy is saved.
- Pro
No Contacts Empty State
Team and accessA contacts book's empty state with two tabs: Add one, a name, email and company form, and Import CSV, a drop zone that reads the file's header in your browser; one button for the active tab and an address-card tray whose dashed place turns solid.