Svelte comments blocks.

100 comment section blocks for React: threads and replies, composers, attachments, draft helpers, moderation, privacy, approvals, notifications, search and analytics. The gallery sorts them into 15 groups: Threads and replies, Composers, Media and attachments, AI draft helpers, Thread lenses, Moderation, Privacy and access, Approvals and ownership, Time and schedules, Notifications, Integrations, Organise and filter, Search, Views and records, Analytics. Each one is a section file with typed sample comments that you replace with your own.

For a thread under a post start from Basic Comments, which sorts Oldest or Newest, lets the author edit and delete, and points one composer at the comment you reply to. For a long argument use Nested Threads Comments, and for a diff with threads on its lines Code Review Comments. For a moderation queue use Moderation Console Comments.

No. The comments live in the page's memory and nothing is sent, so a refresh resets them. Posting, editing, deleting and voting call no API, and where a block hands data on, a comment in the file says where your server call goes, for example "Send the comment, the name and the mark to your server here; this demo only keeps them." in Digital Signature Comments.

No model runs. The AI draft helpers, such as Toxicity Detection Comments and Grammar Check Comments, are checked by typed rules, and the file says so. The toxicity block reads a typed phrase list, marks the phrase it found, and offers a calmer one. Replace the rules with a call to your moderation or language service.

Comments are a typed array of Remark objects (id, by, at, body, edited and parent) in the order they were written. Basic Comments builds the tree from the parent ids, with two levels of replies. Load your rows from the database in that shape, keep the parent id empty for a top-level comment, and the thread, the count and the sorting are worked out from it.

Find the state update in the post handler, send the comment to your API there, and add it to the list when the server answers. The composer in Basic Comments posts with Ctrl or ⌘ and Enter, which is checked by a small function on the key event, so you can change the shortcut in one place. Delete collapses the row to "Comment deleted. Undo" until the next action, so call your delete only when that undo lapses.

Mentions Comments reads the @handles in a note against a typed roster as you type and shows who is notified, who is not in the thread yet and what a group such as @design expands to. Swap the roster for your users and groups, and send the resulting list with the comment so your server does the notifying. The picker itself is Mention Autocomplete Comments.

Chat Integration Comments draws the chat message each rule would post (new comment, reply, mention, resolved) and Webhook Triggers Comments lists endpoints, their events and a delivery log with the JSON body of each request. Nothing is called in either: use them as the settings screens, and send the events from your server when a comment is created.

Moderation Console Comments keeps a queue of flagged comments, shows each in context with the flags tallied, and offers Keep, Remove (which asks for a reason in an alert dialog) and Warn author. K, R and W choose the same decisions while focus is in the window and not in a field. Every decision can be undone, so call your server only when the undo lapses, or make the call reversible.

This page lists 100 of the category's 100 comments blocks for Svelte. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Svelte comments blocks are the React ones ported to Svelte, on Ark UI's Svelte primitives. They keep the layout, the copy and the theme tokens, and install with shadcn-svelte (/r/svelte/comments-a-b-testing.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Svelte needs svelte @ark-ui/svelte lucide-svelte installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn-svelte@latest add` with the block's registry URL, such as /r/svelte/comments-a-b-testing.json for A/B Testing Comments. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 15 kinds of comments block, led by threads and replies (9), media and attachments (9), privacy and access (9) and views and records (9), and sort by popular or name. A good first look: A/B Testing Comments, Role-Based Comments and Activity Stream Comments. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a comments block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the threads and writing, ai helpers and safety and access kinds.

Open its page and use the full-screen viewer (/view/comments/svelte/a-b-testing) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each comments block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the comments blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 comments blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a comments block, read it with get_block and install it on your Svelte stack.

Pass `category: "comments"` to search_blocks to search only the 100 comments blocks, or to list_blocks for the 15 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "comments", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.