shadcn.io is not affiliated with official shadcn/ui
Integrations Account Block for Vue
Who can reach which of your data: one set of grants shown by data or by app, each as a removable chip with the access in words, a revoke that can be undone, and counts worked out from the grants.
Installation
Overview
Show people which connected apps can reach which of their data, with this grants panel for Vue with Ark UI. A compact header holds the title and one sentence. Inside a hairline frame with a plus mark on each corner, a Segment Group flips one set of grants between By data and By app, with a count worked out from the grants ("10 grants from 5 apps"). By data, each row is a kind of data (calendar, contacts, files, mail, location) with a neutral icon tile and the apps that can reach it as chips, each naming the access in words and with an icon ("Zoom can read and write"); by app, each row is an app, shown with a two-letter lettermark tile, and the chips name the data. The cross on a chip revokes that one grant. A row with nothing in it says so, the status line at the foot reports each change, and a quiet Button undoes the last one. The two views share a grid cell, so flipping them never moves the page. It's built from Segment Group, Button and Guides, with a CSS entrance only. For a privacy settings page, a connected apps screen or any product that integrates with other services.
FAQ
How do I fill it with my own data and apps?
Edit DATA (the kinds of data a person has, each with an id, a name and a short hint), APPS (an id, a name, a one-line hint and a two-letter mark for the neutral tile) and GRANTS, a flat list of { data, app, access } where access is read or write. Both views, the chips, the counts and the empty-row lines are worked out from that one list, and the order of rows and chips follows the order of DATA and APPS. The icon for each kind of data is picked in DataIcon; the tiles for apps are placeholders you replace with logos you have the rights to use.
What stays local, and how do I make it real?
Revoking and Undo change this page's state and say so ("Revoked Zoom access to calendar in this demo."): nothing is revoked at any app and no token is touched. To wire it, call your server in remove to revoke that one grant (usually a scope on an access token, or a deletion of the app's permission for that data), and load the real grants into GRANTS. Undo would then need to ask the app to grant it again, so most products drop it or send people to reconnect the app.
How can one list be shown two ways without moving the page?
Both views are always in the markup, stacked in one grid cell: the one you are not looking at is invisible, inert and hidden from assistive technology, so the cell is as tall as the taller of the two and flipping never changes the page's height. Because both read the same grants, a chip removed in one view is gone in the other, and the counts agree. The segment control is a single choice and keeps focus when you press it.
How do Undo and focus work?
Revoking pushes the grant onto a small stack and moves focus to the next chip in the same row, or to the previous one, or to the row itself when it was the last. Undo restores the most recent one, says so, and moves focus to its chip. With nothing to undo the button stays in place and answers "Nothing to undo."
Is it accessible?
Each view is a real list named for what it holds, every row is a list of chips, and every cross is a button that names both sides ("Revoke Slack access to mail"). Access is said in words and with an icon, never by colour. The segment control is a group with one value at a time, the hidden view cannot be reached by keyboard or screen reader, and one polite status line reports each revoke, undo and empty press.