Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Role Change Notification Block for Ark UI

A role change from Viewer to Editor with who made it and when, the change as a You can now and a You can no longer cell with plus and minus marks and words, two tabs of facts and abilities at one height, and a local acknowledgement with Undo.

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

Tell people exactly what a new role changes, with this role change notification for React with Ark UI. It is Grantwick, an access manager, in a framed panel with a plus mark on each corner: "Viewer to Editor" with an Avatar of the admin who changed it and the time, then two hairline cells, "You can now" and "You can no longer", each item with a plus or a minus and its words. Under them two Tabs: "What changed" (a Data List of role, who, when, seat, workspace and reason) and "Editor abilities" (all eight abilities, the three new ones marked with the word New), kept at one height. "Got it" and "This is a mistake" answer in the page: the foot turns into a sentence of what happened with a permanent Undo in the same place. Lines come from Guides. For access managers, workspaces and any product where a role decides what you can do.

FAQ

How do I use my own roles and permissions?

Edit FROM, TO, WHO, WORKSPACE and CHANGED_AT for the change, GAINED and LOST for the two cells, and ABILITIES (an id, the text and whether it is fresh with the new role) for the full list. The cells, the tabs and the sentence use them, and AS_OF is the page's fixed now, used for the time of your answer.

Why plus and minus, and is colour used?

A change in permissions is a gain and a loss, so each cell has a heading with a plus or a minus mark and its words ("You can now", "You can no longer") and every item repeats the mark. There is no green or red, so it reads the same in every theme and in monochrome.

What do the buttons do, and what stays local?

"Got it" marks the notice as seen and "This is a mistake" marks it wrong, each in this page only: the foot says what happened ("Marked as seen at 09:30 UTC in this demo") and an Undo in the same place restores the question. Nothing is sent to an admin, nothing changes a real permission and there is no mail link. In your app post the answer from reply and keep the Undo.

Do the tabs change the height?

No. Both panels are kept in the markup under an unseen copy of each, so the tab area is as tall as the taller one and the foot does not move when you change tabs. Arrow keys move between the two tab triggers on every base.

How does it look on a phone?

The two cells stack, the two short tab labels stay on one line in their strip, and the foot puts the sentence above the two buttons. The sentence reserves the room of its longest wording so answering never moves the buttons.

Is it accessible?

Each cell has a heading, the lists are real lists, the tabs follow the tabs pattern, and the answer buttons are replaced by Undo with focus moved to it. The one status line is polite and says what changed; the hidden layers are inert so they are never in the tab order.

All 100 notification blocks