shadcn.io is not affiliated with official shadcn/ui
No Roles Empty State Block for Vue
An 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.
Installation
Overview
Turn the first role into something you build, with this no roles empty state for Vue with Ark UI. A whole screen, split in two by a hairline band across it with a plus mark where it meets each rail. At the start sit the heading, a name Input in a Field, five Switches for what the role can do (view, comment, edit, delete, invite) and one sentence that rewrites itself as you flip them, such as "Editor can view, comment and edit. Cannot delete or invite." The Shine Button creates the role and is the only colored control. At the end a key ring hangs three tags, drawn in one line weight: the next free tag is dashed and carries the name and permission count of the role you are building, live; creating it turns the tag solid and adds a Badge chip under the form. Three roles fit and Start over puts them back. The band is ruled by Guides, the key ring is one SVG that changes by class, and the entrance is CSS only. For the roles page of any admin or access tool.
FAQ
What stays in the page, and how do I make it real?
The roles live in the page's state: reload and the key ring is bare, and Start over bares it without a reload. Nothing is saved or sent. To wire it for real, post the name and the permission ids to your API where the code says so, then add the role from the response, and load the existing roles into the same list and key ring.
How is the sentence built?
From the switches alone: the permissions that are on are joined with "and" after "can", the ones that are off with "or" after "Cannot", and the two special cases, nothing on and everything on, have their own wording. It is plain text in the page, tied to the Create role button as its description, so it reads when you reach the button, and it never speaks while you flip switches.
What does the name field refuse?
An empty name, and a name a role already has, ignoring case. The reason shows in a line under the field that holds its space, so the layout never moves, and focus goes back to the field. The button stays in the tab order and says why instead of doing nothing; with three roles made it tells you to start over, since the demo holds three.
Is the key ring accessible?
It is decoration, hidden from assistive technology: the same facts are in the form's sentence, the chips under it and the one polite status line, which says each change ("Created Editor with 3 of 5 permissions in this demo"). The words on the tags are HTML laid over the drawing, not SVG text, so they follow the page's font and language.