Reviews

Display user feedback, ratings, and testimonials about a product or service

Use the Reviews component to help users make informed decisions before purchase by displaying user ratings and reviews about a product or service. The component can be fully translated and customized in many ways:

---
import { reviews, reviewSummary, reviewButtons } from '@data'
---

<Reviews
    reviewCountTitle="Showing {0} reviews"
    verifiedText="Verified review"
    reviews={reviews}
    summary={reviewSummary}
    reviewButtons={reviewButtons}
    mostHelpful={reviews[0]}
/>

export const reviews = [
    {
        name: 'Jonathan',
        date: '2025. 02. 15.',
        description: 'Absolutely fantastic product!',
        rating: {
            score: 5,
            color: 'var(--w-color-warning)',
            emptyColor: 'var(--w-color-primary-30)',
            outline: false
        },
        avatar: {
            img: 'avatar.png'
        },
        ratedFor: 'Rated for <b>Product Quality</b>',
        positives: [
            'Excellent build quality',
            'Fast shipping',
            'Customer service'
        ],
        negatives: [
            'None'
        ]
    },
    { ... },
    { ... }
]

export const reviewSummary = {
    subText: 'Based on {0} reviews',
    description: 'Help users make informed decisions. Share your experience with this product.',
    rating: {
        color: 'var(--w-color-warning)',
        emptyColor: 'var(--w-color-primary-30)',
        outline: false
    },
    colors: [
        'var(--w-color-alert)',
        'var(--w-color-alert)',
        'var(--w-color-warning)',
        'var(--w-color-success)',
        'var(--w-color-success)'
    ],
    cta: {
        text: 'Write a review'
    }
}

export const reviewButtons = [{
    icon: replyIcon, // Import your icon as SVG
    text: 'Reply',
    theme: 'flat'
}, { ... }, { ... }]

The component expects a single prop called reviews that defines user reviews in as an array of objects. A review object must have the following properties:

• name: The name of the reviewer.
• date: The date when the review was submitted.
• description: The review itself.
• rating.score: Sets the rating.

The other props are optional and can be used to display additional data. The above example uses the following additional props that are options:

• reviewCountTitle: Sets a title above the list of reviews. You can use the {0} placeholder to inject the amount of reviews into the text.
• verifiedText: When set, it’ll display a badge under each review with a check mark. Can be used to indicate that the reviews are from verified purchases.
• summary: Customizes the summary section next to the list of reviews. Please see the summary section for more details.
• reviewButtons: Accepts an array of buttons that are displayed under each review. You can add commonly used actions here such as functionality for reporting comments or marking them as helpful.
• mostHelpful: Sets the most helpful review. It accept an object in the same format as the reviews array.

Default Style

If only the required prop is provided for the component, all elements will use default styles. Passing only the reviews prop will render the component in the following way:

---
import Reviews from '@blocks/Reviews/Reviews.astro'
import { reviews } from '@data'
---

<Reviews reviews={reviews} />

Many of the props of a Review object are also optional. Only date, name, description, and rating.score are required fields:

---
import Reviews from '@blocks/Reviews/Reviews.astro'

const reviews = [
    {
        name: 'Jonathan',
        date: '2025. 02. 15.',
        description: 'Absolutely fantastic product!',
        rating: {
            score: 5
        }
    },
    { ... },
    { ... }
]
---

<Reviews reviews={reviews} />

Summary

The summary for the reviews is automatically calculated using the reviews prop. However, you can customize this section by specifying the summary prop on the component with the following properties:

---
import Reviews from '@blocks/Reviews/Reviews.astro'

const summary = {
    show: true,
    subText: 'Based on {0} reviews',
    description: 'Help users make informed decisions.'
    rating: {
        color: 'var(--w-color-warning)',
        emptyColor: 'var(--w-color-primary-30)',
        outline: false
    },
    colors: [
        'var(--w-color-alert)',
        'var(--w-color-alert)',
        'var(--w-color-warning)',
        'var(--w-color-success)',
        'var(--w-color-success)'
    ],
    cta: {
        text: 'Write a review'
    }
}
---

<Reviews
    reviews={reviews}
    summary={summary}
/>

• show: You can hide the summary section by setting this property to false. Defaults to true.
• subText: Sets a short text under the summarized review. You can use the {0} placeholder to display the total number of reviews.
• description: Displays a longer text under the summary.
• rating: Accepts the props of a Rating component that can be used to customize the stars.
• colors: You can customize the colors of the bars using an array, starting from 1-star.
• cta: In case you need to provide additional actions for users, you can use the cta property to display a button.

Most Helpful Review

Under the summary, a single review can be highlighted that can be used as the most helpful review for potential customers. This section can be configured using the mostHelpful and mostHelpfulTitle (defaults to “Most helpful review”) props:

---
import Reviews from '@blocks/Reviews/Reviews.astro'

const reviews = [
    { ... },
    { ... },
    { ... }
]
---

<Reviews
    reviews={reviews}
    mostHelpful={reviews[0]} {/* Expects a review object */}
    mostHelpfulTitle="Rated as top review"
/>

API

type Review = {
    date: string
    name: string
    description: string
    rating: RatingProps
    avatar?: AvatarProps
    ratedFor?: string
    positives?: string[]
    negatives?: string[]
}

type ReviewsProps = {
    reviews: Review[]
    reviewButtons?: ({
        text: string
        icon?: string
    } & ButtonProps)[]
    reviewCountTitle?: string
    verifiedText?: string
    positiveTitle?: string
    negativeTitle?: string
    summary?: {
        show?: boolean
        subText?: string
        description?: string
        colors?: string[]
        rating?: Omit<RatingProps, 'score'>
        cta?: ({
            text: string
            icon?: string
        } & ButtonProps)
    }
    mostHelpful?: Review
    mostHelpfulTitle?: string
    className?: string
}