Comment Card
Display user comments with avatars, timestamps, likes, and nested replies.
Preview
Single comment with interactions
This is exactly what we needed for the dashboard redesign. The component API is intuitive and the styling options are flexible enough for our use cases.
Simple Comment
Basic comment without interactions
Looking forward to the next release!
Nested Replies
Comment with nested reply thread
Has anyone tested this with the new API endpoints?
Yes! Works perfectly with v2 endpoints.
Confirmed on staging environment as well.
Comment Thread
Full thread with multiple comments
Great progress on the new features! The design system is coming together nicely.
Thanks Sarah! The team has been working hard on this.
Excited to see it in production soon!
Quick question - will the new components be backwards compatible with the existing theme?
CommentCard Props
CommentCard API reference
| Prop | Type | Default | Description |
|---|---|---|---|
author* | CommentAuthor | — | Comment author info |
content* | string | — | Comment text content |
timestamp* | string | — | When comment was posted |
likes | number | 0 | Number of likes |
replies | number | 0 | Number of replies |
liked | boolean | false | Whether current user liked |
onLike | () => void | — | Like button callback |
onReply | () => void | — | Reply button callback |
onMore | () => void | — | More options callback |
children | ReactNode | — | Nested reply comments |
className | string | — | Additional CSS classes |
CommentThread Props
CommentThread API reference
| Prop | Type | Default | Description |
|---|---|---|---|
comments* | CommentWithReplies[] | — | Array of comments with nested replies |
className | string | — | Additional CSS classes |
Types
Supporting type definitions
interface CommentAuthor { name: string avatar?: string role?: string // e.g., "Admin", "Moderator"}
interface CommentCardProps { author: CommentAuthor content: string timestamp: string likes?: number replies?: number liked?: boolean onLike?: () => void onReply?: () => void onMore?: () => void children?: React.ReactNode className?: string}
// For CommentThreadinterface CommentWithReplies extends CommentCardProps { id: string replies?: Array<CommentCardProps & { id: string }>}Usage
Import and implementation examples
import { CommentCard, CommentThread } from '@/blocks/data-display/comment-card'
// Single comment<CommentCard author={{ name: 'Jane Doe', role: 'Admin' }} content="Great work on this feature!" timestamp="2 hours ago" likes={5} liked={isLiked} onLike={() => setIsLiked(!isLiked)} onReply={() => openReplyModal()}/>
// With nested replies<CommentCard author={{ name: 'John Smith' }} content="Question about the implementation..." timestamp="1 day ago"> <CommentCard author={{ name: 'Jane Doe' }} content="Here's the answer..." timestamp="20 hours ago" /></CommentCard>
// Full thread<CommentThread comments={[ { id: '1', author: { name: 'User 1' }, content: 'First comment', timestamp: '3h ago', replies: [ { id: '1-1', author: { name: 'User 2' }, content: 'Reply', timestamp: '2h ago' } ] } ]}/>Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- User avatars: Display author profile pictures with fallback initials
- Author roles: Show badges for admins, moderators, etc.
- Like functionality: Interactive like button with count
- Reply support: Reply button and nested comment threads
- Nested comments: Indented replies with visual hierarchy
- More options: Contextual menu for edit, delete, report
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Avatar images have alt text with author nameInteractive elements have proper focus statesLike count updates are announced to screen readersKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between interactive elements |
| Enter/Space | Activate like, reply, and more buttons |
Notes
- Timestamps could be enhanced with datetime attribute
- Consider aria-live for dynamic like counts
- Nested comments maintain proper heading hierarchy