shadcn.io is not affiliated with official shadcn/ui
Collaboration Rules Settings Block for React
Six collaboration rules beside a live preview: pick Member, Editor or Guest and a drawn document with a comment thread plus five rows say what that person can view, comment on, reply to, resolve and mention, and why.
Installation
Overview
Show admins what a rule does before they save it with this collaboration rules panel for React with Base UI. Six rules sit at the start: who can comment, threaded replies, who can resolve a thread, guest access, whether guests can mention members and link sharing, as Native Selects and Switches. At the end a Toggle Group named Preview as picks Member, Editor or Guest. A greyscale stub of a document with a comment thread draws the parts that person gets as solid and the ones they don't as dashed, and five rows (View, Comment, Reply, Resolve and Mention) say Allowed, Not allowed or Own threads only, each with the rule that decided it. The preview follows the rules as you set them, before anything is saved, which is how you see what a change does. On a wide screen a short paragraph under the rules reads them back in plain words. The foot counts unsaved changes, and the one Shine Button saves them in the page. A rule that can't work, guests mentioning members while guest access is off, refuses to save and says why. On a phone the preview sits under the rules and the foot stays pinned. It's built from Native Select, Switch, Toggle Group, Button, Shine Button and Guides, with a CSS entrance only. For a documents tool, a wiki or any product with guests.
FAQ
How do I change the rules and the people it previews?
SAVED holds the rules the page opens with, and WHO_COMMENTS, WHO_RESOLVES and LINKS hold the choices each menu offers. The outcomes come from outcomesOf, a pure function of the rules and the person: edit canView, canComment and the five small functions after them (viewOf, commentOf, replyOf, resolveOf, mentionOf) if your product has different rules, and add a person to ACTORS to preview another kind of user.
Why does the preview change before I save?
Because the preview answers the question an admin has while changing a rule: what would this do to a guest? It reads the draft, so switching Guest access off at once shows a guest losing View, and the reason beside each row names the rule behind it. Discard puts the saved rules back and the preview follows. The words Own threads only mean the person can resolve a thread they started, which is what the first Resolve choice gives everyone who can comment.
What does Save refuse?
Saving with nothing changed says there is nothing to save. Turning on Guests can mention members while Guest access is off can't work, so Save leaves the rules as they are, says so in the status line and moves focus to the Guest access switch. Every other combination is allowed, and the preview shows what it amounts to: for example, link sharing set to anyone with the link lets a guest view even when guest access is off, and still not comment.
What stays local, and how do I make it real?
Everything. Save only keeps the rules in the page and the status line says so; no document, comment or guest is touched. To make it real, send draft to your server in save, apply the same rules there (the preview is a courtesy, the server decides), and replace saved with its answer.
How does it work with a keyboard and a screen reader?
Tab runs through each rule's control in order, then Preview as, then the foot. Each switch is named for its rule and described by its line, each menu has a visible label, and the status line is the one live region. The outcome list is named by the sentence above it (A guest can do 4 of 5 things), and each row reads as its action, the word and the reason. The drawn document is hidden from assistive technology because the list says everything it shows.
Related
- Pro
Role Permissions Settings
Team and rolesA roles window with a rail of five roles and a detail of grouped permissions: mixed-state group boxes, a Compare with select that marks each permission with a plus or a minus, read-only system roles and Duplicate to edit.
- Pro
Team Members Settings
Team and rolesA members panel with seat and two-factor meters, a native table with row selection, a role menu per person and, pinned at the foot, a bulk role change and Remove that an Undo walks back one step at a time.
- @@Pro
Workspace Invites Settings
Team and rolesJoin rules for a workspace: a domain rules table with a role menu and approval switch, a form that checks a domain before adding it, a field that tries an email address against the rules, and a queue of join requests to approve or decline.
- Pro
Data Classification Settings
Privacy and consentA four-label ladder (Public, Internal, Confidential, Restricted) as columns of handling switches, with six sample documents whose label is checked against what it requires.
- Pro
Transfer Ownership Settings
Team and rolesA three-step alert dialog for handing over a workspace, open over the members list: choose an admin, review the before and after of both roles, type the workspace name, then a pending state with Cancel transfer.
- Pro
Access Token Hygiene Settings
Sign-in and securityAn access token settings panel that flags risky tokens (no end date, unused for 90 days, the admin scope, ending soon), gives a token an end date from a menu, and revokes the ticked ones after an alert dialog lists them.