shadcn.io is not affiliated with official shadcn/ui
Toxicity Detection Comments Block for Radix UI
A forum thread with a check before posting: a phrase list marks the hostile words in your draft, offers a calmer swap, and sends a flagged comment for review where only you can show it.
Installation
Overview
Add a pause before a heated reply, with this pre-post check for React with Radix UI. A compact header sits over one framed thread on a gardening society's forum. The thread is a held scroll region with a reply, a moderator's reminder and one comment already marked "Held for moderators" to show what other members see. Under it the composer has a Textarea and a check box that reads the draft with a typed phrase list: it says "Clear", or "Review suggested" with the phrase marked and why ("shut up" reads as hostile), and offers a chip that swaps in a calmer wording. A flagged draft is not posted: the Shine Button becomes "Send for review", and your comment lands in the thread as held, with Show anyway so you can read your own text. It names phrases, never people. It is built from Textarea, Badge, Button, Avatar, Field, Kbd, Shine Button and Guides, with a CSS entrance only. For forums, community platforms and any comment box with a moderation step.
FAQ
How does it decide what to flag?
A typed list, RULES, of phrases with word boundaries (shut up, stupid, idiot, get lost, pathetic), each with a reason and a calmer swap. It is the simplest honest version: it never scores a person or a mood, only matches phrases, and the block says so. Edit the list to match your community's guidelines.
Can I use a moderation model?
Yes. Replace flagsOf(text) with a call that returns the same list of { id, phrase, why, swap }. Keep the wording discipline: name the phrase and the reason, offer a way to fix it, and never call the author toxic. Run the same check on the server, since a browser check can be skipped.
What does Held for moderators mean here?
The flagged comment is added to the thread but its text is hidden from everyone except you, with a badge and a sentence saying a moderator will review it. Show anyway reveals your own text to you. The comment from another member in the thread shows the receiving end: the text is not there at all.
What stays local?
The thread, the check and the held state. Posting says "Posted in this demo. Nothing was sent." or "Held for moderators in this demo." To make it real, send the comment with a held flag from post, show held comments to their author and to moderators only, and give moderators an approve or remove action.
Is it accessible?
The check box is tied to the textarea with a description, so a screen reader hears the result with the field. Swap chips carry the phrase they replace in hidden text. The held row says why its text is missing in words, and Show anyway has an expanded state. The status line reports swaps, posts and holds.