shadcn.io is not affiliated with official shadcn/ui
No Permissions Empty State Block for Svelte
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 Svelte with Ark 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.