---
title: Review
description: One customer review as an article — its stars, title, author, date, a verified-purchase badge and the shop's reply.
visibility: guest
draft: false
---

# Review

`<x-wirekit::review>` shows one customer review: its stars, its title and text, who wrote it and when, whether the purchase was verified, and the shop's reply. Each review is an article with a heading, so a reader can move from one to the next.

The average and the distribution above the reviews are the [review summary](/components/review-summary).

## Usage

:::preview{title="A review"}
<x-wirekit::review :rating="4" title="Warm and well made" author="Lena M." date="2026-09-28" verified>
    The wool is soft and it keeps its shape after washing. The sleeves run a little long.
</x-wirekit::review>
:::

The text is the slot. `date` takes a date, a string, or a Unix timestamp, and is written as the application's locale writes a date. `verified` marks a review whose purchase the shop has checked, with a badge that says so in words.

## The Shop's Reply

The `reply` slot is the shop's answer, set off under the review with who wrote it and when:

:::preview{title="A review with the shop's reply"}
<x-wirekit::review :rating="2" title="Arrived late" author="Tom K." date="2026-09-20" reply-author="Northwind Outfitters" reply-date="2026-09-21">
    The jacket is fine, but the parcel took two weeks.
    <x-slot:reply>We are sorry about the delay. Our carrier had a backlog that week, and we have refunded your shipping.</x-slot:reply>
</x-wirekit::review>
:::

Without `reply-author` the reply is from "the shop".

## Actions

The `actions` slot holds what a reader can do with a review, such as marking it helpful or reporting it:

:::preview{title="A review with actions"}
<x-wirekit::review :rating="5" title="Exactly as described" author="Ana S." date="2026-10-02">
    Fits well, and the color matches the photos.
    <x-slot:actions>
        <x-wirekit::button size="sm" intent="neutral" surface="ghost">Helpful</x-wirekit::button>
        <x-wirekit::button size="sm" intent="neutral" surface="ghost">Report</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::review>
:::

## A List of Reviews

The list is a composition: the summary with its filter rows, a select to sort, the reviews, and [pagination](/components/pagination) under them. Each review's heading level follows the page's outline, `3` under a section headed at level 2:

:::preview{title="Reviews with a summary and sorting"}
<x-wirekit::stack gap="lg">
    <x-wirekit::review-summary :average="4.3" :distribution="[5 => 2, 4 => 1, 3 => 0, 2 => 1, 1 => 0]" :filters="[5 => '?stars=5', 4 => '?stars=4', 3 => '?stars=3', 2 => '?stars=2', 1 => '?stars=1']" />
    <x-wirekit::select label="Sort by" name="sort" :options="['recent' => 'Most recent', 'highest' => 'Highest rated', 'lowest' => 'Lowest rated']" value="recent" />
    <x-wirekit::stack gap="lg">
        <x-wirekit::review :rating="5" title="Exactly as described" author="Ana S." date="2026-10-02" verified>Fits well, and the color matches the photos.</x-wirekit::review>
        <x-wirekit::review :rating="4" title="Warm and well made" author="Lena M." date="2026-09-28" verified>The wool is soft and it keeps its shape after washing.</x-wirekit::review>
        <x-wirekit::review :rating="2" title="Arrived late" author="Tom K." date="2026-09-20">The jacket is fine, but the parcel took two weeks.</x-wirekit::review>
    </x-wirekit::stack>
</x-wirekit::stack>
:::

In a Livewire component, render the page of reviews and the pagination from the same paginator:

```blade
@foreach ($reviews as $review)
    <x-wirekit::review
        :rating="$review->rating"
        :title="$review->title"
        :author="$review->author_name"
        :date="$review->created_at"
        :verified="$review->verified"
    >
        {{ $review->body }}
    </x-wirekit::review>
@endforeach

<x-wirekit::pagination :paginator="$reviews" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rating` | `int\|float` | `0` | The review's score, drawn as stars |
| `max` | `int` | `5` | The top of the scale, as on [rating](/components/rating) |
| `title` | `string\|null` | `null` | The title, the review's heading |
| `author` | `string\|null` | `null` | The reviewer's display name. It names the review where there is no title |
| `date` | `DateTimeInterface\|string\|int\|null` | `null` | When the review was written |
| `verified` | `bool` | `false` | A purchase the shop has checked: a badge says "Verified purchase" |
| `level` | `int` | `3` | The heading level of the title, from `2` to `6` |
| `replyAuthor` | `string\|null` | `null` | Who replied for the shop. Without one, the reply is from "the shop" |
| `replyDate` | `DateTimeInterface\|string\|int\|null` | `null` | When the shop replied |
| `timezone` | `string\|null` | `null` | The zone both dates are written in. Null keeps each date's own |
| `scope` | `string\|null` | `null` | Scoped personalization key |

## Slots

| Slot | Description |
| --- | --- |
| default | The review's text |
| `reply` | The shop's reply |
| `actions` | What a reader can do with the review |

## Accessibility

- **A review is an article named by its title**, or by its author where it has no title, and its title is a heading at the level the page needs, so a reader can move from review to review.
- **The stars are an image named with the score**, "4 out of 5 stars".
- **The date is a `<time>`** with the moment in machine-readable form, written as the locale writes a date.
- **The verified mark is text**, a badge that says "Verified purchase", not an icon or a color.
- **The shop's reply is an article of its own**, named "Reply from …", and set off by a line at its start edge, which mirrors in a right-to-left page.

## Keyboard Interaction

A review takes no focus of its own. <kbd>Tab</kbd> reaches the controls in its `actions` slot.

## Design Tokens

| Token | Use |
| --- | --- |
| `--text-wk-sm` | The text, the meta line and the reply |
| `--color-wk-text-muted` | The date and the meta line |
| `--border-wk-width` + `--color-wk-border` | The line beside the shop's reply |
| `--space-wk-md` + `--padding-wk-x-md` | The indent of the reply |
| `--gap-wk-sm` | The space between the parts of a review |