Comment

Displays a user comment with avatar, author, timestamp, body content, and an optional action bar. Supports threading via the nested slot.

ExamplesCodeUsageChangelog

Basic

JS

Jane Smith2 hours ago

Looks good to me. The crusher throughput numbers are within spec.

Tailwind v4

<Comment author="Jane Smith" time="2 hours ago">
  Looks good to me. The crusher throughput numbers are within spec.
</Comment>

With actions

Use the actions slot for Reply, Like, Edit, Delete links. Pair with LinkButton variant="ghost" or plain <button> elements.

MT

Mike Torres45 minutes ago

Downtime on Crusher #2 has been logged. Waiting on parts ETA from supplier.

Tailwind v4

<Comment author="Mike Torres" time="45 minutes ago">
  Downtime on Crusher #2 has been logged.
  <template #actions>
    <Button variant="ghost" size="sm" @click="liked = !liked">Like</Button>
    <Button variant="ghost" size="sm">Reply</Button>
    <Button variant="ghost" size="sm">Edit</Button>
  </template>
</Comment>

With avatar image

Sarah ChenYesterday

The sieve test results from the morning shift look within tolerance. I've attached the PDF report.

Tailwind v4

<Comment author="Sarah Chen" time="Yesterday" avatar-src="/avatars/sarah.jpg">
  The sieve test results look within tolerance.
  <template #actions>
    <Button variant="ghost" size="sm">Reply</Button>
  </template>
</Comment>

Highlighted (mention)

Use highlighted to draw attention to a comment — e.g. when the user was @mentioned.

DW

Dan Wright1 hour ago

@Jane — can you review the loadout numbers for the afternoon shift?

Tailwind v4

<Comment author="Dan Wright" time="1 hour ago" :highlighted="true">
  <strong>@Jane</strong> — can you review the loadout numbers?
</Comment>

Edited

JS

Jane Smith3 hours ago(edited)

Updated the throughput figure — was using the wrong shift total.

Tailwind v4

<Comment author="Jane Smith" time="3 hours ago" :edited="true">
  Updated the throughput figure — was using the wrong shift total.
</Comment>

Saving state

Y

YouJust now

Still processing...

Saving…

Tailwind v4

<Comment author="You" :saving="saving">
  {{ commentText }}
</Comment>

Threaded replies

Use the nested slot to indent child comments beneath a parent.

JS

Jane Smith3 hours ago

The overnight numbers look off — production dropped 18% between 2–4am.

Tailwind v4

<Comment author="Jane Smith" time="3 hours ago">
  The overnight numbers look off.
  <template #actions>
    <Button variant="ghost" size="sm">Reply (1)</Button>
  </template>
  <template #nested>
    <Comment author="Mike Torres" time="2 hours ago">
      Scheduled maintenance window — should be fine.
    </Comment>
  </template>
</Comment>

Multiple comments

JS

Jane Smith4 hours ago

Morning shift crusher throughput was 312 t/h — slightly above target.

DW

Dan Wright3 hours ago

Fuel consumption was 642 L, within the expected range.

SC

Sarah Chen1 hour ago

Afternoon shift has started. No issues to report so far.

Tailwind v4

<div class="flex flex-col gap-4">
  <Comment author="Jane Smith" time="4 hours ago">
    Morning shift crusher throughput was 312 t/h.
  </Comment>
  <Comment author="Dan Wright" time="3 hours ago">
    Fuel consumption was 642 L, within range.
  </Comment>
</div>

Props

Prop	Type	Default	Description
author	string	—	Required. Display name — also used for initials avatar
time	string	—	Timestamp string, e.g. "2 hours ago"
avatarSrc	string	—	URL for avatar image. If omitted, shows initials
avatarColor	string	—	Background color for initials avatar. Auto-derived from name if omitted
edited	boolean	false	Show "(edited)" after the timestamp
highlighted	boolean	false	Amber background — use for @mention highlights
saving	boolean	false	Show "Saving…" in place of actions
error	boolean	false	Show "Failed to save. Retry." in place of actions

Slots

Slot	Description
default	Comment body content
actions	Action bar — Reply, Like, Edit buttons. Hidden if not provided
nested	Threaded child comments, rendered below with a left border indent