Comment & Review

CommentItem 讨论评论（支持回复嵌套），ReviewItem 用户评价（含星级）。

CommentItem

标准评论，含头像 / 作者 / 时间 / 正文 / Reply 按钮，可选附图和多条回复。

Import

import { CommentItem, ReviewItem } from "@forge-ui/react";

Usage

Jane Cooper2 hours ago

This looks amazing! Great work on the design system.

1<CommentItem
2  avatar="https://i.pravatar.cc/100?img=1"
3  name="Jane Cooper"
4  date="2 hours ago"
5  content="This looks amazing! Great work on the design system."
6  onReply={() => {}}
7/>

With Images & Replies

传 images 显示缩略图网格；传 replies 在下方嵌套子评论。

Jane Cooper2 hours ago

This looks amazing!

Alex Brown1 hour ago

Thanks Jane!

1<CommentItem
2  avatar={avatar}
3  name="Jane Cooper"
4  date="2 hours ago"
5  content="This looks amazing!"
6  images={["..."]}
7  replies={[
8    { avatar, name: "Alex Brown", date: "1 hour ago", content: "Thanks!" },
9  ]}
10/>

API

Attribute	Type	Default	Description
`avatar`	`string`	`—`	作者头像 URL。
`name`	`string`	`—`	作者姓名。
`date`	`string`	`—`	发表时间文案（组件不做格式化，直接渲染）。
`content`	`string`	`—`	评论正文。
`images`	`string[]`	`—`	可选附图 URL 数组。
`replies`	`CommentReply[]`	`—`	回复列表，结构同主体（不含 replies / images）。
`onReply`	`() => void`	`—`	点击 Reply 按钮的回调。
`className`	`string`	`—`	外层额外 className。

ReviewItem

商品评价。头像 + 姓名 + 星级 + 正文，可选副标题、日期、附图与 +N 溢出。

Usage

Rating:

Mar 15, 2026

Jane Cooper-Verified Buyer

Excellent product quality! The design is sleek and modern.

1<ReviewItem
2  avatar={avatar}
3  name="Jane Cooper"
4  subtitle="Verified Buyer"
5  date="Mar 15, 2026"
6  rating={4}
7  content="Excellent product quality!"
8/>

Card Variant

variant="card" 外层加白底卡片和边框，适合独立展示。

Alex BrownMar 10, 2026

Best purchase this year. Highly recommended!

1<ReviewItem
2  variant="card"
3  avatar={avatar}
4  name="Alex Brown"
5  date="Mar 10, 2026"
6  rating={5}
7  content="Best purchase this year."
8  images={["...", "..."]}
9  overflowImageCount={3}
10/>

API

Attribute	Type	Default	Description
`avatar`	`string`	`—`	用户头像 URL。
`name`	`string`	`—`	用户姓名。
`subtitle`	`string`	`—`	用户下方副标题（如 Verified Buyer）。
`date`	`string`	`—`	评价时间。
`rating`	`number`	`0`	评分，0-5。
`content`	`string`	`—`	评价正文。
`images`	`string[]`	`—`	附图 URL 数组。
`overflowImageCount`	`number`	`—`	尾部 +N 缩略图数字。
`variant`	`'regular' \| 'card'`	`'regular'`	card 变体有白底卡片外壳。

看所有变体 →