Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Success blocks

Pro

Role Change Permissions Success Block for Vue

A role change confirmation inside an app panel: the role before and after, who changed it and when, how many permissions were gained and lost, and a table of eight capabilities with the new ones marked.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show what a new role actually changes with this confirmation panel for Vue with Ark UI. It's the panel Tendrilwork, a project hub, shows after a workspace owner moves someone from Member to Admin: a header with one action, the Shine Button that opens the dashboard, over one framed card ruled by Guides. Its first band is four cells on shared hairlines: the role before and after, who changed it, when, and what it amounts to ("4 gained, 0 lost"). The second is a Table of eight capabilities with a Member column (before) and an Admin column (now), each cell a check or a "not included", and an outline Badge marking the ones that are new. On a phone the Member column goes and the New mark carries the change. For roles, permissions, access reviews and any page that confirms a change of privilege.

FAQ

What stays in the page, and how do I wire it for real?

Nothing was changed: the roles are typed sample data. Edit CAPABILITIES (each has whether Member could and whether Admin can) and CHANGE (who, when, from and to). To wire it, build the rows from your role definitions for the old role and the new one, and set the facts from the audit entry for the change.

Where do gained and lost come from?

They are counted from the rows: gained is a capability Admin has and Member lacked, lost is the reverse, and the strip's "4 gained, 0 lost" and the "4 new of 8" over the table both read the same list. A row is marked New only when it counts as gained, so changing a row in the data changes the count and the badge together.

Is a state only a color?

No. A capability is a check and the word "Included", or a bar and "Not included", in the same weight in light and dark. On a phone the words are visually hidden to save room but still read out, and the column headings say which role each column is.

How is the table built?

It's a native table on every base, with a caption for assistive technology, column headings and each capability's name as a row heading, so it reads the same everywhere.

How does it look on a phone?

The header's button drops under the sentence, the four facts stack two by two, and the table shows each capability with its Admin state and the New mark. The Member column is left out on a phone, since the badge and the counts already say what changed.

All 100 success blocks