> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# ReviewCard

> A single written review: a star rating with an optional author byline, a title, and the review body.

```tsx theme={null}
import { ReviewCard } from "@fanvue/ui";
import type { ReviewCardProps } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-reviewcard--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="400" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="ReviewCard — Default" />
</Frame>

```tsx theme={null}
import { ReviewCard } from "@fanvue/ui";

const SAMPLE_BODY = "Easily plan and organize your content with this app. Streamline your scheduling and management tasks to focus on what yo…";

<ReviewCard rating={4} author="@jane_doe" title="A great app to start!">{SAMPLE_BODY}</ReviewCard>
```

## Without Author

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-reviewcard--without-author&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="400" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="ReviewCard — Without Author" />
</Frame>

```tsx theme={null}
import { ReviewCard } from "@fanvue/ui";

const SAMPLE_BODY = "Easily plan and organize your content with this app. Streamline your scheduling and management tasks to focus on what yo…";

<ReviewCard rating={5} title="Exactly what I needed">{SAMPLE_BODY}</ReviewCard>
```

## Title Only

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-reviewcard--title-only&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="400" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="ReviewCard — Title Only" />
</Frame>

```tsx theme={null}
import { ReviewCard } from "@fanvue/ui";

<ReviewCard rating={3} author="@user_123" title="Good, but room to grow." />
```

## Low Rating

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-reviewcard--low-rating&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="400" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="ReviewCard — Low Rating" />
</Frame>

```tsx theme={null}
import { ReviewCard } from "@fanvue/ui";

<ReviewCard rating={1} author="@user_456" title="Not for me">The idea is solid but it kept crashing on launch. Hoping a future update sorts out the stability issues.</ReviewCard>
```

## List

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-reviewcard--list&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="400" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="ReviewCard — List" />
</Frame>

```tsx theme={null}
import { Divider, ReviewCard } from "@fanvue/ui";

const SAMPLE_BODY = "Easily plan and organize your content with this app. Streamline your scheduling and management tasks to focus on what yo…";

<div className="flex flex-col gap-6">
  <ReviewCard rating={5} author="@jane_doe" title="A great app to start!">
    {SAMPLE_BODY}
  </ReviewCard>
  <Divider />
  <ReviewCard rating={4} author="@sam_smith" title="Really useful">
    {SAMPLE_BODY}
  </ReviewCard>
  <Divider />
  <ReviewCard rating={3} author="@alex_p" title="Does the job">
    {SAMPLE_BODY}
  </ReviewCard>
</div>
```

## Props

## ReviewCard

A single written review: a star rating with an optional author byline, a title, and the review body. Stack several with a `Divider` between them to build a review list.

<ParamField path="rating" type="number" required>
  Star rating the reviewer gave, shown beside the star icon.
</ParamField>

<ParamField path="author" type="ReactNode">
  Reviewer name or handle, rendered after "by". Omitted when not provided.
</ParamField>

<ParamField path="children" type="ReactNode">
  Review body text.
</ParamField>

<ParamField path="maxRating" type="number" default="5">
  Highest possible rating, used only in the accessible label (e.g. "4 out of 5").
</ParamField>

<ParamField path="title" type="ReactNode">
  Short headline for the review.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `ReviewCardProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)