Comment

Card variant for a single comment. Pass a name and a timestamp — initials, avatar color (from the squad brand palette), and relative time are all derived automatically.

MVMarisol Vega2h ago

Here's Round 2. We leaned into the 70s marquee reference, pushed the italic coral pop on "Summer", and softened the gradient behind it. Let me know where to tighten.

Installation

$Terminal

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

Usage

Renders as a Card with type="comment" under the hood. Use either Comment or Card directly.

TSImport

import { Comment } from "@/components/ui/comment";

TSExample

import { Comment } from "@/components/ui/comment";

// Just pass the name and a timestamp — initials and avatar color are
// derived from the name (hashed into the squad brand palette), and the
// timestamp is auto-formatted into a relative string ("2h ago").
export function Example() {
  return (
    <Comment name="Marisol Vega" timestamp={new Date()}>
      Here's Round 2. We leaned into the 70s marquee reference.
    </Comment>
  );
}

Composition

One component, prop-driven avatar + name + time + body.

Comment              — wrapper over <Card type="comment" />
├── name             — author name (required); drives initials + color
├── timestamp        — Date / ISO string / number → relative string
├── initials         — optional override (auto from name)
├── color / colorFg  — optional bg/fg override (auto from brand palette)
├── avatarUrl        — optional image URL
└── children         — comment body

Default

Pass only a name — initials and avatar color are derived automatically.

MVMarisol Vega2h ago

Here's Round 2. We leaned into the 70s marquee reference, pushed the italic coral pop on "Summer", and softened the gradient behind it. Let me know where to tighten.

Small

`size="sm"` tightens the paddings.

SRSarah Reyes1h ago

Looks great! Adding a couple pins.

With avatar image

Pass `avatarUrl` to use a photo instead of initials.

Marisol Vega2h ago

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

Thread

Stack multiple comments — each name auto-picks its own color.

MVMarisol Vega2h ago

Here's Round 2. We leaned into the 70s marquee reference, pushed the italic coral pop on "Summer", and softened the gradient behind it.

SRSarah Reyes1h ago

Looks great! Adding a couple pins.

JPJordan Patel10m ago

Approved on my end — shipping this round.

API Reference

Comment-specific props on top of Card.

Prop	Type	Default	Description
`name`	string	—	Author display name. Drives initials + avatar color when not overridden.
`timestamp`	Date \| string \| number	—	Auto-formatted into a relative string ("just now", "5m ago", "3h ago", "Mar 19").
`initials`	string	first letters of name	Override the auto-derived initials.
`avatarUrl`	string	—	Use a photo instead of initials.
`color`	string	hashed from name	Override the avatar background color.
`colorFg`	string	from palette	Override the avatar text color paired with `color`.
`size`	"default" \| "sm"	"default"	Forwarded to the underlying Card.
`action`	ReactNode	—	Top-right slot (e.g. a bookmark icon).
`footer`	ReactNode	—	Forwarded to the underlying Card.
`className`	string	—	Extra classes merged onto the Card.