CommentThread

Displays a threaded comment list with author avatars (generated from initials), timestamps, and nested replies. Suitable for discussions, reviews, testimonial conversations, feedback sections, and social features.

Use Cases

• Blog post comment sections
• Product review threads
• Discussion forums and community pages
• Feedback and testimonial displays
• Team collaboration previews
• Social feature demos (activity feeds, chat previews)

Properties

heading

Optional heading above the comment thread. Type: string.

comments

Array of comment objects with author, text, optional time, and optional nested replies. Type: array.

showAvatars

Show colored avatar circles with initials next to each comment. Type: boolean. Default: true.

customCss

Custom CSS styles. Type: string.

Best Practices

• Write realistic comments that match the app’s domain (not ‘Great post!’)
• Include timestamps for chronological context (‘2 hours ago’, ‘Yesterday’)
• Use 3-5 comments for a natural-looking thread
• Keep showAvatars: true for visual richness (avatars auto-generate from names)
• For nested replies, add them in the ‘replies’ array of parent comments

Common Mistakes

Using generic names and comments (‘User 1: Nice!’)

Why it's a problem: Generic comments make the demo look fake and unprofessional.

Fix: Use realistic full names and specific, domain-relevant comments.