Comment

A single comment — author, time, rich body, reactions and reply — as a project feed draws it.

Marisol Vega

Here's Round 2. We leaned into the 70s marquee reference and softened the gradient behind the title.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/comment-card.json

Usage

One line: pass the author, the body and the handlers you want. Anything left out simply doesn't draw.

TSImport

import { CommentCard } from "@/components/blocks/comment-card";

TSExample

"use client";

import { CommentCard } from "@/components/blocks/comment-card";

export function Example() {
  return (
    <CommentCard
      author={{ name: "Marisol Vega" }}
      body="Looks great — adding a couple pins."
      timestamp={new Date()}
      onReact={(emoji, added) => console.log(emoji, added)}
      onReply={() => console.log("reply")}
    />
  );
}

Composition

Anatomy of the avatar, the card, and its footer.

CommentCard                    (single component — pass everything as props)
├── avatar                     (author.avatar ?? Avatar(author.name, author.avatarUrl);
│                               inside the card, left of the name, by default — avatarPosition)
└── card-surface               (brand tint when `mine`)
    ├── header
    │   ├── name · summary · (edited)   (name + avatar: author.card / onClick / href
    │   │                                → hover card, click, link; underline on hover)
    │   └── ⋯ menu              (hover-revealed, `actions`)
    ├── body                   (string → rich markdown; any node as-is)
    └── footer
        ├── reaction chips + EmojiPicker popover + Reply + replies toggle   (left)
        └── time                                               (right; hover → full date)

Default

Avatar and name on top, the body, then reactions, Reply and the time in the footer. Hover the card for the ⋯ menu.

Marisol Vega

Here's Round 2. We leaned into the 70s marquee reference and softened the gradient behind the title.

Custom avatar

`author.avatar` takes any node, so you can wire in your own face — here Inky speaks for TheSquad. A string body renders as rich markdown.

TheSquad

Comments just got rich ✨

Everything you can write in a comment now renders: lists, code, highlights and more.

Your comment

`mine` tints the card in the brand colour; `edited` marks a reworded note.

Jacob Vendramin(edited)

Test

Read-only

Leave out `onReact`, `onReply` and `actions` and only the facts remain — the chips still show how many agreed.

Marisol Vega left a note on Sermon Bumper

Pushed the coral pop on the title — let me know where to tighten.

Thread

Stack cards for a thread — each carries its own face beside the name.

TheSquad

Comments just got rich ✨

Everything you can write in a comment now renders: lists, code, highlights and more.

Jacob Vendramin(edited)

Test

API Reference

Props for the card, its author, and a reaction chip.

CommentCard

Prop	Type	Default	Description
`author`	CommentAuthor	—	Who left the comment — name, photo, or your own avatar node.
`body`	ReactNode	—	A string renders as rich markdown; any other node as-is.
`summary`	ReactNode	—	Muted words after the name, e.g. "left a note on Sermon Bumper".
`heading`	ReactNode	—	Replaces the name line (name, summary, (edited)) outright — for a card that announces something.
`timestamp`	Date \| string \| number	—	"12:58 PM" today, "Sep 18 · 12:58 PM" otherwise; full date on hover.
`time`	ReactNode	—	Replaces the formatted time outright.
`edited`	boolean	false	Adds "(edited)" after the name.
`mine`	boolean	false	Tints the card in the brand colour.
`avatarPosition`	"outside" \| "inside" \| "none"	"inside"	Where the avatar sits: in the card beside the name, beside the card (a column down a rail), or not at all.
`reactions`	CommentReaction[]	[]	Chips in the footer. The card toggles them optimistically; a new array re-syncs.
`reactionChoices`	string[]	["👍","❤️","🎉","😂","👀","🙏"]	The reaction picker's Popular row, shown until the viewer has recent picks.
`emojiPicker`	Pick<EmojiPickerProps, …>	—	Passed to the reaction picker (the SDK EmojiPicker): saved `recent` / `skinTone` with their handlers, a phrase `suggester`, a self-hosted `emojibaseUrl`.
`onReact`	(emoji: string, added: boolean) => void	—	Enables the picker and tappable chips.
`onReply`	() => void	—	Shows the Reply button.
`replyLabel`	string	"Reply"	Reply button label.
`actions`	DropdownMenuItemSpec[]	—	Items for the hover-revealed ⋯ menu (same shape as DropdownMenu `items`).
`actionsLabel`	string	"Show more actions"	Tooltip + aria-label of the ⋯ button.
`className`	string	—	Classes on the outer row.
`cardClassName`	string	—	Classes on the card itself — a highlight ring, an accent edge.

CommentAuthor

Prop	Type	Default	Description
`name`	string	—	Display name; drives initials + avatar colour.
`avatarUrl`	string \| null	—	Photo URL. Falls back to initials.
`avatar`	ReactNode	—	Your own avatar node (Inky, a presence ring, …). Wins over avatarUrl.
`card`	ReactNode	—	Opened on hover or focus of the name or the avatar — a person card, say.
`onClick`	() => void	—	Fires on a click of the name or the avatar.
`href`	string	—	Makes the name and the avatar a link. Any of card / onClick / href underlines the name on hover.

CommentReaction

Prop	Type	Default	Description
`emoji`	string	—	The glyph.
`count`	number	—	How many picked it.
`mine`	boolean	—	The viewer is one of them — the chip reads pressed.
`who`	string[]	—	Names for the hover label ("Josh, Ashley and 2 more").