Comment Thread

Threaded React comment list with initials avatars, author name, timestamp and body in bordered bubbles. Pairs with the comment composer.

src/registry/ui/comment-thread.tsx/r/comment-thread.json

Installation#

bash

npx shadcn@latest add @minidev/comment-thread

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/comment-thread.json

Usage#

tsx

import { CommentThread } from "@/components/ui/comment-thread"

export function Example() {
  return (
    <CommentThread comments={[{ id: "1", author: "Aman", body: "Looks good — ship it.", time: "2h ago" }]} />
  )
}

API reference#

CommentThread props
Prop	Type	Default
`comments`	`Comment[]`	`SAMPLE_COMMENTS`
`className`	`string`	`-`

Dependencies#

npm

React only

Built from

Examples#

WorkflowSteps & boards

Approval CardReact request card for approval workflows showing the requester avatar, title and summary, with Reject and Approve buttons wired to your callbacks.Assign PickerAssignee picker for tasks and tickets: a listbox of people with initials avatars, where the selected person is highlighted and choices report their id.Due Date ChipSmall Tailwind due date chip with a calendar icon that switches to a red border and icon when overdue. Use it on task cards, tickets and boards.Gantt RowOne row of a Gantt timeline: a task label beside a track with a bar placed by start and end values on a shared scale. Stack rows to build a React roadmap.Issue CardA compact issue tracker card with a monospace ticket key, status and priority badges, a title and an assignee line. Fits Linear or Jira style boards.Issue KeyA monospace ticket identifier such as MD-241 that renders as plain text or, given an href, as a link with an accent hover underline. For issue lists.

All kanban, timeline and workflow components