shadcn.io is not affiliated with official shadcn/ui
Private Thread Members Comments Block for React
A private founders thread with a Who can read cell: member key fingerprints, a confirm dialog to remove access, a select to add one of four people, and a Re-keyed for N people line after every change.
Installation
Overview
Make it clear who can read a private conversation, with this private comment thread for React with Base UI. A compact header names the thread. One hairline frame splits in two: on one side the thread, with a "Private" Badge, an Avatar group and the line "Visible to 4 people", three notes in a labelled scroll region that keeps its height and a composer under it; on the other a "Who can read" cell. Each member shows initials, a name and a key fingerprint of four groups in mono type, and everyone except you has a "Remove access" button that opens an Alert Dialog naming the person and how many people the thread is re-keyed for. Under the list a Native Select adds one of four people who are not members. Every change updates the avatars, the count and a polite status line ("Added Elio Brandt. Re-keyed for 5 people"). It is built from Alert Dialog, Native Select, Avatar, Badge, Textarea, Field, Button, Shine Button and Guides, with a CSS entrance only. For private notebooks, shared decisions and any thread whose readers change.
FAQ
Is anything encrypted here?
No. The fingerprints are typed strings and nothing is encrypted, keyed or stored; the block says so under the list. It draws the part people need to understand: who is in, which key stands for them, and that removing or adding someone changes the keys. A real end-to-end design needs a key for each person, a new thread key whenever membership changes, and a way to verify fingerprints out of band. That belongs in your server and a vetted crypto library, not in this page.
How do I use my own members?
Edit PEOPLE (an id, initials, name and a four-group fingerprint), FIRST (the ids who can read when the page opens), ME (the owner, who has no Remove access) and START (the notes). The member list, the avatars, the "Visible to N people" line and the select of people who are not members are worked out from the array of ids.
What happens to a removed person's notes?
In this demo their earlier notes stay in the thread; only their access changes. A real app decides whether notes stay readable to the others, and whether the removed person keeps what they already saw. Say what your product does in the dialog text.
Is it accessible?
Each Remove access button is named after the person, the dialog is a real alert dialog that moves focus into it and back, the add control has a visible label, fingerprints keep their character order in any language, and the status line is present from load and is read out politely. After a removal focus lands on the "Who can read" heading.