# Review Card

> Moderating customer reviews before and after they go live.

Component · Commerce · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/ReviewCard/)

Moderating customer reviews before and after they go live.

Props: `author`, `verified`, `product`, `date`, `rating`, `title`, `text`, `state` ("pending" | "published" | "hidden" | "flagged"), `stateLabel`, `highlight` (words to mark, e.g. refund, scam), `reply`, `onPublish`, `onHide`, `onReply(text)`, `replyLabel`.

- Pending reviews carry the signal edge until someone decides.
- Hiding is reversible; deleting a review is not offered here.

## Example

```tsx
import * as React from "react";
import { ReviewCard } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "1fr 1fr",
          gap: 16,
          alignItems: "start",
        } as React.CSSProperties
      }
    >
      <ReviewCard
        author="Jonas P."
        verified
        product="1,000 followers"
        date="2 days ago"
        rating={2}
        state="pending"
        title="Slower than promised"
        text="Arrived after two days instead of one hour. Support answered quickly though, so two stars. Would be great to get a refund for the delay."
        highlight={["refund"]}
        onPublish={() => {}}
        onHide={() => {}}
        onReply={() => {}}
      />
      <ReviewCard
        author="Ida N."
        product="TikTok views"
        date="Apr 12"
        rating={5}
        state="published"
        text="Fast, simple, worked exactly as described."
        reply="Thanks Ida, glad it worked!"
        onHide={() => {}}
        onReply={() => {}}
      />
    </div>
  );
}
```

## Props

### ReviewCard

| Prop | Type | Notes |
| --- | --- | --- |
| `author` | `string` | Required |
| `verified?` | `boolean` |  |
| `product?` | `string` |  |
| `date?` | `string` |  |
| `rating` | `number` | Required |
| `title?` | `string` |  |
| `text` | `string` | Required |
| `state?` | `"pending" \| "published" \| "hidden" \| "flagged"` |  |
| `stateLabel?` | `string` |  |
| `highlight?` | `string[]` |  |
| `reply?` | `string` |  |
| `replyLabel?` | `string` |  |
| `onPublish?` | `() => void` |  |
| `onHide?` | `() => void` |  |
| `onReply?` | `(text: string) => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |