shadcn.io is not affiliated with official shadcn/ui
Permission Roles Carousel Block for Ark UI
Five access roles for an access-control tool, one per swipeable slide, each with seven real permission checkboxes that tick the ones they need, a derived count, a Custom mark when a preset is changed and a Reset to preset button.
Installation
Overview
Show what each role can do without a wide matrix, with this permission roles carousel for React with Ark UI. Rolecall, an access-control tool, has five roles (Admin, Editor, Reviewer, Billing and Viewer) on one ruled track, one role per slide. Each slide lists seven permissions as real Checkboxes, each with a hint that says what it needs, and counts what the role can do ("Can do 4 of 7") from the ticks. Permissions depend on each other: ticking Publish ticks Edit content and View projects, clearing Edit content clears Publish and Delete content, and the status line says which others moved. A role that no longer matches its preset shows a "Custom" mark and a "Reset to preset" Button. A band above the track sums up every role with its count and a "Custom" word, each a button that jumps to the role, and the foot holds the status line, a dot for each role, and Previous and Next. The ruled bands come from Guides. Rolecall, the roles and the people counts are made up for the example.
FAQ
How do I use my own roles and permissions?
Edit PERMS and ROLES. A permission has an id, a label and the ids it needs; a role has an id, a label, a people count, a sentence and the preset of permission ids it starts with. The counts, the hints, the Custom mark and the dependency rules are all derived from those two lists, so nothing is typed twice.
How do the dependencies work?
Ticking a permission also ticks everything it needs, and clearing one also clears everything that needs it, following the chain in both directions. The status line names the others that moved ("Delete content turned off. Also off: Publish"), so nothing changes silently. The rule lives in nextGrant, which you can replace with your own.
When does a role show Custom?
When its ticks differ from its preset in any way. The mark has a reserved place in the slide header, so it appears without moving anything, and "Reset to preset" puts the preset back. If the role already matches, the button stays in place and the status line says so.
How does it work with a keyboard?
Tab reaches the role buttons above the track, then the checkboxes and the reset button of the role in view, then the dots, Previous and Next. Space ticks a checkbox. Each checkbox is named with its role and its permission ("Editor: Publish") and described by what it needs. Roles that are out of view are hidden from the tab order and from screen readers.