Comments
Communication & Notifications · 8 checks · 15 resources
Anchored discussion attached to a specific piece of content, with a path to resolution.
Before you ship
- 01Anchor to context — comments attached to a specific paragraph, image, task or row rather than floating in a general thread
- 02Reply threading — replies nested under the comment they respond to, keeping related discussion together
- 03Resolve and archive — a way to mark a thread resolved, removing it from the active view while keeping it accessible
- 04Reactions — emoji reactions on individual comments as a lightweight acknowledgement
- 05@mention element — mentioning a user notifies them directly and is visually distinguished in the comment body
- 06Edit action — the ability to edit after posting, with a visible edited marker for transparency
- 07Delete action — the ability to delete after posting, with a confirmation modal beforehand
- 08Comment count indicator — a visible count or badge on the item being discussed, so collaborators can see where threads exist
Resources that help you build this
- Plate · Slate-based rich-text editor framework with 86 shadcn-installable editor componentsComponent LibrariesS
- React Bits Pro · 703 paid React items in one license-gated shadcn registry: 134 animated components, 538 blocks, 11 templates and an Agent KitComponent LibrariesS
- UX Patterns for Devs · 92 UX patterns with accessibility rules, an MCP server and llms.txtDesign Systems & Brand GuidelinesS
- Atlassian Design System · Atlaskit: 59 Apache-2.0 React components behind Jira, Confluence and BitbucketDesign Systems & Brand GuidelinesA
- HextaUI · 103 shadcn registry items: primitives plus AI, auth, billing, settings and team blocksComponent LibrariesA
- Liveblocks · Realtime sync, comments, notifications, and editors as ready components for collaborative appsComponent LibrariesA
- Pierre Diffs · React diff renderer on Shiki with split/unified layouts, inline edits and commentsComponent LibrariesA
- Avvvatars · React component that derives a deterministic placeholder avatar from a stringComponent LibrariesB
- Facehash · Deterministic CSS-drawn avatar faces from any string, zero runtime dependenciesComponent LibrariesB
- moumenlab · shadcn registry of 13 motion-first interaction components, MIT, React 19 + Tailwind v4Component LibrariesB
- Open Previews · Open-source preview comments that work on any staging or preview hostAgent Design ToolingB
- Oreo Avatar · Deterministic soft-gradient SVG avatars, 6 shapes x 40 palettesComponent LibrariesB
- Page Flows · Screen recordings of real user flows from shipped iOS, Android, web, and email appsInspiration GalleriesB
- Pastel · Visual website feedback and approval tool for designers, developers, and marketersAgent Design ToolingB
- Primer · GitHub's design system: 62 React components, Octicons and design tokensDesign Systems & Brand GuidelinesB