shadcn.io is not affiliated with official shadcn/ui
Content Moderation Settings Block for React
A moderation rules window: a rail of four rules, an editor with action, sensitivity and blocked words, and a tester that runs a typed comment through the rules and marks what matched.
Installation
Overview
Tune what a community lets through and see the effect on a comment right away, with this content moderation window for React with Base UI. It is a fixed-height window with its own top bar and three panes. The rail lists four rules (spam links, shouting, blocked words, repeated posts), each with a Switch and a line saying what it does and how strictly. The editor for the chosen rule has what to do on a match in a Native Select (flag, hold for review, hide), a Slider with three stops (Low, Medium, High) and a sentence for what the stop means, and for blocked words a Tags Input. The third pane tries a comment: type one or start from a sample, and a pure function runs the rules that are on and gives a verdict ("Held for review: spam links") with each rule's finding ("3 links, the limit at Medium is 2") and the matched parts marked in the comment. The strongest action wins. The samples are mild and invented, and the blocked words that stand in for offensive ones show as [redacted] with a category word. The top bar's one Shine Button checks the comment and says the verdict. On a phone the rail and the rule are one pane at a time, and Edit and Test share the pane. It's built from Switch, Native Select, Slider, Tags Input, Segment Group, Textarea, Button, Shine Button and Guides, with a CSS entrance only. For a forum, a comment system or any product with community rules.
FAQ
How do the rules decide?
Each is a small pure function of the comment and the rule's sensitivity. Spam links counts addresses that start with http or https against a limit of 4, 2 or none. Shouting compares capital letters with all letters, once a comment has 12 letters, against 80, 60 or 40 percent. Blocked words matches the whole word in the same case, the whole word in any case, or the text anywhere in any case. Repeated posts compares the comment, ignoring case, spaces and punctuation, with the same person's earlier comments today, acting at the third, second or first copy. Add a rule by writing its function and its row in START.
Why are the blocked words redacted?
The demo ships no offensive words, so the first two entries are stand-ins written as [redacted] with a category, and they match exactly as typed. In your community the list holds the real words. Words are matched as typed, up to 30 characters, at most eight, and a word that is already on the list is refused with the reason under the field.
What does the verdict mean, and what does Check comment do?
The verdict is the strongest action among the rules that matched: hide beats hold for review, which beats flag. Rules that are switched off don't run. It updates as you type, and it is spoken once, a moment after the last change; an edit to a rule says its effect at once. Check comment says the current verdict immediately. Nothing is posted, held or hidden.
What stays local, and how do I make it real?
Everything: the rules, the word list and the comment live in this page's state and return to their starting values on reload, and the earlier comments the repeat rule compares with are a typed sample. To make it real, run the same functions on your server when a comment is posted, keep the rules and the word list with the community, and queue held comments for a moderator.
How does it work on a phone and by keyboard?
The window keeps its height and shows one pane at a time: the rules first, then the chosen rule under a Back button that returns to the row you left. An Edit and Test toggle switches between the editor and the tester, and at a wide width all three panes show and the toggle goes away. Each rule in the rail is a real button marked as current with its own named switch, the slider takes the arrow keys, and the status line is a polite live region present from the start.
Related
- Pro
Notification Channels Settings
Alerts and auditA destinations window for alerts: a rail of Slack, email, PagerDuty, webhook and SMS destinations with a status word, beside the chosen one's routing by severity, a pause switch and a simulated test.
- Pro
Search Configuration Settings
Product controlsA fixed-height window that tunes search live: three field-weight sliders, a typo tolerance choice and synonym pairs beside a ranking of six products for the query tee, with a computed score and an arrow for each product that has moved.
- Pro
Moderation Queue Reviews
ModerationA keyboard triage queue for a marketplace: eight held reviews with a progress line, and the review in focus with Approve, Reject and Escalate, each on a key, a polite status line and Undo.
- Pro
Collaboration Rules Settings
Team and rolesSix 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.
- 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
Maintenance Mode Settings
Product controlsA maintenance mode settings page you edit in place: a slim admin bar with the switch, the window and a bypass popover, over the visitors' page drawn with a headline and message you click to edit, or the live store when it is off.