Comments

Install

pnpm dlx shadcn@latest add @vegastack/comments

Usage

import {
  CommentComposer,
  CommentList,
  type CommentData,
} from "@/components/ui/comments";

<CommentList
  comments={comments}
  count={total}
  hasEarlier={!!cursor}
  onLoadEarlier={loadEarlier}
  highlightedId={hashCommentId}
  onEdit={(id, body) => updateComment(id, body)}
  onDelete={(id) => deleteComment(id)}
  onCopyLink={(id) => copy(`${url}#comment-${id}`)}
  composer={<CommentComposer onSubmit={(body) => postComment(body)} />}
/>;

CommentList is a record's discussion: an h2 "Comments" with the count and, when onOrderChange is set, an "Oldest first" / "Newest first" toggle; "Load earlier" when older comments exist; the comments; and the composer at the end. Pass comments oldest first; order="newest" reverses them. With no comments, the empty state offers "Add a comment", which reveals the composer and focuses it.

CommentComposer is Linear style: a soft filled box whose editor grows with its text, a round ↑ send button at the bottom right (disabled while empty; Cmd/Ctrl+Enter also sends) and an optional attachments slot at the bottom left. No avatar sits beside it. Editing a comment uses the same box, compact: a round ↑ Save (disabled while empty or unchanged) and a ghost × Cancel, both with tooltips; Cmd/Ctrl+Enter saves and Esc cancels. The parts take data and callbacks and keep only transient UI state. A callback that returns a promise drives the saving or posting state. If the promise rejects, its message appears under the editor. Bodies are Markdown, edited with TextEdit (no toolbar; a reduced slash menu) and rendered with MarkdownView.

Each comment is anchored at #comment-<id>. Pass that id as highlightedId to tint it and scroll it into view. The ⋯ menu shows Copy link when onCopyLink is set, and Edit or Delete when the comment's canEdit or canDelete allows them. Delete asks for confirmation first.

Anatomy

Examples

Empty

"Add a comment" reveals the composer and focuses it. Once comments exist, the composer is always shown.

Loading

Edited, deleted with replies

A soft-deleted comment with replies stays as "Comment deleted" so the thread keeps its place. Hide one with no replies yourself. replies (or renderReplies on the list) indents one level of CommentItems.

Editing and highlighted

Posting and error

posting and error are controlled overrides. Without them the composer follows onSubmit's promise: it shows as busy while the promise is pending, clears on success and keeps the text on failure.

API Reference

Accessibility

• The section is labelled by its heading. The comments are a list, and replies are a nested list named "Replies".
• Each comment's ⋯ trigger is named for its author ("Actions for comment by Asha Rao").
• The relative time shows the exact time on hover or focus. "edited" does the same with the edit time.
• Errors are announced with role="alert".

Do / Don't