Comments

Display a list of user-generated messages

npm run add Comments

Use the Comments component to display user-generated messages, replies, and discussions. You can use them under blog posts, articles, products, or social content. They support nesting, user avatars, publish dates, and user actions like liking or replying. They can be used to:

• Drive engagement: They encourage users to participate, discuss, and share feedback.
• Build communities: Create interaction between users, fostering connection.
• Add social proof: User discussions can increase credibility and interest in content.
• Improve content quality: Feedback and questions help creators refine or clarify material.

Preview

Join the Discussion

Send

Alice Weber 2025-01-10

Main comment that starts the thread.

Reply Report Helpful

Nicholas Spencer 2025-01-12

1st reply to the main comment, nested underneath.

Reply Report Helpful

Jenna Lee 2025-01-13

2nd reply to the main comment, also a reply on the above.

Reply Report Helpful

Tom Larson 2025-01-14

3rd level nesting due to maxDepth being set to 3.

Reply Report Helpful

Jonathan Raman 2025-01-14

This 4th comment will not be nested further down, it'll keep the same level as the previous comment.

Reply Report Helpful

Mark Smith

This comment is a direct reply to the main comment, without a publish date.

Reply Report Helpful

David Kim 2025-10-20

Here's another independent top-level comment with no replies yet and no avatar.

Reply Report Helpful

---
import { comments, commentButtons } from './comments.ts'
---

<Comments
    title="Join the Discussion"
    comments={comments}
    showForm={true}
    commentButtons={commentButtons}
/>

// Your import path to icons may differ
import { replyIcon, flagIcon, likeIcon } from '@icons'

export const comments = [
    {
        text: 'Main comment that starts the thread.',
        name: 'Alice Weber',
        avatar: { img: '/img/avatar2.png', alt: 'Alice Weber' },
        publishDate: '2025-01-10',
        secondary: true,
        replies: [...]
    }
]

export const commentButtons = [{
    icon: replyIcon,
    text: 'Reply',
    theme: 'secondary'
}, {
    icon: flagIcon,
    text: 'Report',
    theme: 'secondary'
}, {
    icon: likeIcon,
    text: 'Helpful',
    theme: 'secondary'
}]

The Comments component expects a comments prop that describes each comment. Each comment can have the following properties:

• text: Sets the text for the comment.
• name: Sets the name of the commenter.
• avatar: Pass an AvatarProps object to set an avatar for the comment.
• publishDate: Displays a publish date under the name.
• replies: Pass an array of comment objects to display replies. Replies can be nested indefinitely. Each reply will be nested under the main comment for up to 3 levels of nesting by default. You can change the number of nesting levels by changing the maxDepth prop on the component.

Each comment is wrapped in a Card component so you can pass card-specific props to each comment, such as secondary or compact. The component can also display a title, form, and action buttons for each comment, however, they are not mandatory:

Single comment without buttons

Mark Smith

This comment is a direct reply to the main comment, without a publish date.

---
import { comments } from './comments.ts'
---

<Comments comments={comments} />

Nesting

By default, replies are nested up to 3 levels. This behavior can be changed globally or on a per-comment basis using the maxDepth prop. For example, if you want to disable nesting completely, you can set the maxDepth prop to 0:

<Comments comments={comments} maxDepth={0} />

Forms

To display a default form, you can set showForm to true. If you need to customize it, you can pass a custom form using the form prop, which expects an array of FormField objects:

<Comments
    ...
    form={[
        {
            type: 'textarea',
            placeholder: 'Your message',
            name: 'message'
        },
        {
            type: 'button',
            label: 'Leave comment'
        }
    ]}
/>

To handle form submission and user interaction, you can edit the provided onChange, onSubmit and onError calls inside the component.

Comment Buttons

Comment buttons can be set on the component itself using the commentButtons props. This will display the same buttons for each comment. However, you can also set buttons for individual comments. Simplify specify commentButtons on the comment node itself:

Single comment without buttons

Mark Smith

This comment is a direct reply to the main comment, without a publish date.

Reply

David Kim 2025-10-20

Here's another independent top-level comment with no replies yet and no avatar.

Report

<Comments comments={[
    { ...comment1, commentButtons: [{ text: 'Reply', theme: 'secondary' }] },
    { ...comment2, commentButtons: [{ text: 'Report', theme: 'secondary' }] }
]} />

API

type CommentProps = {
    text: string
    name: string
    avatar?: AvatarProps
    publishDate?: string
    replies?: CommentProps[]
    commentButtons?: CommentsProps['commentButtons']
    maxDepth?: number
    className?: string
} & CardProps

type CommentsProps = {
    title?: string
    showForm?: boolean
    form?: FormField[]
    maxDepth?: number
    comments: CommentProps[]
    commentButtons?: ({
        text: string
        icon?: string
    } & ButtonProps)[]
    className?: string
}