# Review Card

Customer review card with avatar, date, star rating or score, photos and a verified badge. Long reviews expand in place, the helpful button counts up, and seller replies sit underneath.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/review-card
```

## Import

```tsx
import { ReviewCard } from "@/components/ui/review-card/review-card";
```

## Variants

- `product` — Product: `npx @lumioui/cli add pro/review-card-product`
- `restaurant` — Restaurant: `npx @lumioui/cli add pro/review-card-restaurant`
- `service-pro` — Service pro: `npx @lumioui/cli add pro/review-card-service-pro`
- `stay` — Stay: `npx @lumioui/cli add pro/review-card-stay`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `author` | `string` | — |
| `avatar?` | `ImageSourcePropType` | Avatar image. Initials are used when absent. |
| `authorMeta?` | `string` | Line under the name — "Lisbon · 14 reviews". |
| `date` | `string` | Display date — "Mar 2", "2 weeks ago". |
| `rating` | `number` | — |
| `ratingMax?` | `number` | Scale of `rating`. Default 5. |
| `ratingStyle?` | `"stars" | "score"` | "stars" draws the star row; "score" draws a filled score tile ("9.0"). Default "stars". |
| `starTone?` | `"warning" | "foreground" | "primary"` | Star colour. Default "warning". |
| `context?` | `string` | Context line after the rating — "Stayed 3 nights · Couple", "Size 10 · Fits true". |
| `title?` | `string` | — |
| `body` | `string` | — |
| `maxLines?` | `number` | Lines shown before "Read more". Default 4. |
| `photos?` | `readonly ReviewPhoto[]` | — |
| `onPhotoPress?` | `(index: number) => void` | — |
| `verified?` | `boolean | string` | true → "Verified purchase"; a string overrides the copy ("Verified stay"). |
| `helpfulCount?` | `number` | Helpful votes from others (the viewer's vote is added on top). Omit with no handler to hide the toggle. |
| `helpful?` | `boolean` | Viewer's helpful vote (controlled). |
| `defaultHelpful?` | `boolean` | — |
| `onHelpfulChange?` | `(helpful: boolean) => void` | — |
| `reply?` | `ReviewReply` | — |
| `surface?` | `"plain" | "card"` | "plain" sits in a list (hairline handled by the parent); "card" is a self-contained tile for carousels. Default "plain". |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | Extra footer content — ordered items, booked service. |

## Icons rendered

- `check-circle` — /icons.html?i=check-circle

Source: https://lumioui.com/components/review-card