review-cards
Review Cards
Review section with the average score, distribution bars, a write-a-review prompt, and dated reviews marked when the purchase is verified.
States: Default
Parts
| Part | File | Does |
|---|---|---|
| ReviewCards | ReviewCards.vue | Shows the average rating with its breakdown, review cards and a write-a-review prompt. |
Styling
| Part | Recipe |
|---|---|
| ReviewCards | review-cards |
| ReviewCards | review-cards-heading |
| ReviewCards | review-cards-average |
| ReviewCards | review-cards-summary |
| ReviewCards | review-cards-star |
| ReviewCards | review-cards-percent |
| ReviewCards | review-cards-author |
| ReviewCards | review-cards-content |
| ReviewCards | part-title-lg |
| ReviewCards | hint |
| ReviewCards | meta |
Install
Writes 3 files into components/sections/review-cards/. For agents, npx @frontic/ui docs review-cards prints this reference as markdown; the MCP server serves the same.
- npm packages
- @lucide/vue
- reka-ui
Built from
API reference
ReviewCards ReviewCards.vue
Shows the average rating with its breakdown, review cards and a write-a-review prompt. Renders a <div>.
| Prop | Type | Default | |
|---|---|---|---|
| average | number | 0 | |
| totalCount | number | 0 | |
| counts | RatingCount[] | [] | |
| reviews | ReviewItem[] | [] | |
| title | string | 'Customer Reviews' | |
| summaryLabel | ((count: number) => string) | `Based on ${count} ${count === 1 ? 'review' : 'reviews'}` | |
| distributionLabel | string | 'Review data' | |
| starReviewsLabel | string | 'star reviews' | |
| shareTitle | string | 'Share your thoughts' | |
| shareText | string | 'If you've used this product, share your thoughts with other customers' | |
| writeReviewLabel | string | 'Write a review' | |
| reviewsLabel | string | 'Recent reviews' | |
| verifiedLabel | string | 'Verified purchase' | |
| locale | string | 'en-US' | |
| class | ClassValue | — | |
| Event | Payload | |
|---|---|---|
| write-review | — | |
| Recipe review-cards | Sets | |
|---|---|---|
| base: review-cards | 1 property | |
| Recipe review-cards-heading | Sets | |
|---|---|---|
| base: review-cards-heading | 3 properties | |
| Recipe review-cards-average | Sets | |
|---|---|---|
| base: review-cards-average | 1 property | |
| Recipe review-cards-summary | Sets | |
|---|---|---|
| base: review-cards-summary | 1 property | |
| Recipe review-cards-star | Sets | |
|---|---|---|
| base: review-cards-star | 3 properties | |
| Recipe review-cards-percent | Sets | |
|---|---|---|
| base: review-cards-percent | 2 properties | |
| Recipe review-cards-content | Sets | |
|---|---|---|
| base: review-cards-content | 3 properties · 2 inherited | |
| Recipe part-title-lg | Sets | |
|---|---|---|
| base: part-title-lg | 4 properties | |
| Recipe hint | Sets | |
|---|---|---|
| base: hint | 2 properties | |
| Recipe meta | Sets | |
|---|---|---|
| base: meta | 3 properties | |
Example