Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collaboration Rules Settings Block for Ark UI

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.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show admins what a rule does before they save it with this collaboration rules panel for React with Ark 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.

How does it look on a phone?

The rules come first, one per row with the control under its text, then Preview as, the drawing and the five rows. The foot stays pinned to the bottom of the screen with the status line above Save and Discard.