# Comment

- Page: https://jiguang132.com/resources/arco-design/docs/comment
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Display a comment.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**
- **Alignment**: Alignment of datetime and actions.
- **Nested comments**
- **Usage with List**: Display the comments list with List component.
- **Reply editor**

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Comment

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|align|Alignment of `datetime` and `actions`\|`"left" \\| "right" \\| { datetime?: "left" \\| "right"; actions?: "left" \\| "right"; }`|\| 'left'\| 'right'\| {datetime?: 'left' \| 'right';actions?: 'left' \| 'right';} |`-`|
|actions|List of action items rendered below the comment content|ReactNode |`-`|
|author|Display as the comment author|ReactNode |`-`|
|avatar|Display as the comment avatar|ReactNode |`-`|
|content|The content of the comment|ReactNode |`-`|
|datetime|Display as the comment datetime|ReactNode |`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt