Comments Panel

Comment feed with filters, runnable /edit commands, resolve and a composer.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/comments-panel.json · Import from @/components/ui/comments-panel

When to use

A comments sidebar next to a document, design or record
Collaboration with an assistant that can apply edits people suggest with /edit

When not to use

Long discussions with nested replies – use the Comment Thread for one conversation

Usage

import { CommentsPanel } from "@/components/ui/comments-panel";

export function Sidebar({ comments, me }) {
  return (
    <CommentsPanel
      comments={comments}
      currentUser={me}
      onRunEdit={(c) => api.applyEdit(c.text)}
      onAdd={(c) => api.saveComment(c)}
    />
  );
}

Props

Name	Type	Default	Description
`comments`	`PanelComment[]`		id, author ({ name, avatar }), createdAt and text – text starting with /edit becomes a runnable edit
`currentUser`	`CommentAuthor`		Author of new comments
`onRunEdit`	`(comment) => Promise<void> \| void`		Runs an edit; the button shows Running… until the promise settles
`onAdd`	`(comment) => void`		Called with every new comment
`onClose`	`() => void`		Shows a close button
`title`	`string`	`"Comments"`	Heading in the gray tray

Keyboard

Tab: Move through tabs, sort, comments and the composer
Enter: Send the comment in the composer

Accessibility

Filters are tabs, sorting is a menu of radio items, resolve is a toggle button
Times are real time elements; the list announces new comments politely

Responsive

Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19

Comment Thread – One comment with replies – an assistant reports what it did, folds open details and answers @mentions
Smart Recommendation – Suggestion card with a confidence signal, alternatives to switch to and accept with undo