Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Content Moderator AI Block for Svelte

A review queue of twelve typed posts with policy labels and risk ranks, a Flag at slider that sets which are auto-allowed, sent to a person or auto-blocked, Allow and Block with Undo, and one Apply button.

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

Decide what needs a person and what does not, with this AI content moderator for Svelte with Ark UI. A compact header names the queue, and a hairline frame with a plus mark on each corner holds the panel. The first band is the threshold: a Slider "Flag at", from Strict to Lenient, with a live count ("4 allowed, 5 for review, 3 blocked"). Under it a table of twelve posts shows each one's author initials, its policy label (Spam, Harassment, Misinformation, Off-topic), its risk rank and its status as a word with a glyph, in order of risk. A post ranked below the flag is auto-allowed, one from the flag up needs review, and one 30 points above is auto-blocked; the statuses are worked out from the slider, not stored. Posts that need review have Allow and Block, a decision can be undone, and the Shine Button "Apply 7 decisions" is the only colored control and answers "Applied in this demo". Everything moves with CSS only. For trust and safety tools, comment queues and any rule that a person can tune.

FAQ

What stays in the page, and how do I make it real?

Everything. The twelve posts and their ranks are typed at the top of the file as example figures; no model scores anything, and "Apply" only changes the status line: nothing is removed, hidden or sent. To make it real, load posts with scores from your classifier, send the person's calls and the slider's threshold to your API in apply, and keep the banding function, which only needs a rank and a threshold.

How does the slider change the statuses?

Two lines are drawn from one number. Posts ranked below the flag are auto-allowed, posts from the flag up go to review, and posts ranked 30 or more above it are auto-blocked; moving the flag toward Strict sends more posts to a person, toward Lenient lets more through. The counts above the table and the label on the button come from the same function as the rows, so they always agree.

What do Allow, Block and Undo do?

They settle one post that needs review: its status becomes "Allowed by you" or "Blocked by you", the count above the table follows, and Undo puts it back in the queue. A decision only counts while the post is still in the review band; if the slider moves it out, the band decides again. Focus moves to Undo after a decision and back to Allow after an undo.

Is it usable with a keyboard and a screen reader?

The slider reads "Flag at 50, block at 80" and announces the result once, in the status line, when you let go. The table has a hidden caption, column headings and a row heading for every post, and its buttons are named for their post ("Allow post by SL"). Status is a word and a glyph, never a color.

Does it work in a right-to-left language?

Yes. The slider and the labels follow the direction, posts keep the direction of their own text, and the ranks and counts stay together inside the right-to-left text.

How does it look on a phone?

The table becomes a list of cards with the policy label and risk on top, the post in two lines, and the status with its buttons at the bottom. Every card has the same height, so a decision never moves the list.