---
type: block
title: Reviews
description: Testimonial and review sections for social proof, trust, and product validation.
---

> Fulldev UI for React. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/react/styles/{style}/{name}.json`; see [installation](/react/docs/installation.md).

## Reviews 1

```tsx title="Usage of @fulldev/reviews-1 (react/gallery/blocks/reviews-1.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Reviews1 } from "@/components/blocks/reviews-1"

const placeholderImage = placeholder.src

export default function Reviews1Demo() {
  return (
    <>
      <Reviews1
        title="What customers say"
        description="Example reviews. Replace them with quotes from your customers."
        reviews={[
          {
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
            quote:
              "Example review. Replace it with a short quote from a customer, in their own words.",
            image: placeholderImage,
            initials: "CA",
            name: "Customer A",
            role: "Role, company",
          },
          {
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
            quote:
              "Example review about the result a customer got, such as time saved or a problem solved.",
            image: placeholderImage,
            initials: "CB",
            name: "Customer B",
            role: "Role, company",
          },
          {
            rating: 4.5,
            ratingLabel: "Rated 4.5 out of 5",
            quote:
              "Example review. Specific details, like what changed after working together, read as more credible.",
            image: placeholderImage,
            initials: "CC",
            name: "Customer C",
            role: "Role, company",
          },
        ]}
      />
    </>
  )
}
```

## Reviews 2

```tsx title="Usage of @fulldev/reviews-2 (react/gallery/blocks/reviews-2.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Reviews2 } from "@/components/blocks/reviews-2"

const placeholderImage = placeholder.src

export default function Reviews2Demo() {
  return (
    <>
      <Reviews2
        featured={{
          quote:
            "Example review. Replace it with a short quote from a customer, in their own words.",
          image: placeholderImage,
          initials: "CA",
          name: "Customer A",
          role: "Role, company",
        }}
        reviews={[
          {
            rating: 4.5,
            ratingLabel: "Rated 4.5 out of 5",
            quote:
              "Example review about the result a customer got, such as time saved or a problem solved.",
            image: placeholderImage,
            initials: "CB",
            name: "Customer B",
            role: "Role, company",
          },
          {
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
            quote:
              "Example review. Specific details, like what changed after working together, read as more credible.",
            image: placeholderImage,
            initials: "CC",
            name: "Customer C",
            role: "Role, company",
          },
        ]}
      />
    </>
  )
}
```

## Reviews 3

```tsx title="Usage of @fulldev/reviews-3 (react/gallery/blocks/reviews-3.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Reviews3 } from "@/components/blocks/reviews-3"

const placeholderImage = placeholder.src

export default function Reviews3Demo() {
  return (
    <>
      <Reviews3
        title="What customers say"
        description="Example reviews. Replace them with quotes from your customers."
        reviews={[
          {
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
            quote:
              "Example review. Replace it with a short quote from a customer, in their own words.",
            image: placeholderImage,
            initials: "CA",
            name: "Customer A",
            role: "Role, company",
          },
          {
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
            quote:
              "Example review about the result a customer got, such as time saved or a problem solved.",
            image: placeholderImage,
            initials: "CB",
            name: "Customer B",
            role: "Role, company",
          },
          {
            rating: 4.5,
            ratingLabel: "Rated 4.5 out of 5",
            quote:
              "Example review. Specific details, like what changed after working together, read as more credible.",
            image: placeholderImage,
            initials: "CC",
            name: "Customer C",
            role: "Role, company",
          },
        ]}
        labels={{
          previous: "Previous slide",
          next: "Next slide",
          carousel: "carousel",
          slide: "slide",
        }}
      />
    </>
  )
}
```

## Reviews 4

```tsx title="Usage of @fulldev/reviews-4 (react/gallery/blocks/reviews-4.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Reviews4 } from "@/components/blocks/reviews-4"

const placeholderImage = placeholder.src

export default function Reviews4Demo() {
  return (
    <>
      <Reviews4
        title="What customers say"
        description="Example reviews. Replace them with quotes from your customers."
        reviews={[
          {
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
            quote:
              "Example review. Replace it with a short quote from a customer, in their own words.",
            image: placeholderImage,
            initials: "CA",
            name: "Customer A",
            role: "Role, company",
          },
          {
            rating: 4.5,
            ratingLabel: "Rated 4.5 out of 5",
            quote:
              "Example review about the result a customer got, such as time saved or a problem solved.",
            image: placeholderImage,
            initials: "CB",
            name: "Customer B",
            role: "Role, company",
          },
          {
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
            quote:
              "Example review. Specific details, like what changed after working together, read as more credible.",
            image: placeholderImage,
            initials: "CC",
            name: "Customer C",
            role: "Role, company",
          },
          {
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
            quote:
              "Example review. Keep quotes short enough to read at a glance.",
            image: placeholderImage,
            initials: "CD",
            name: "Customer D",
            role: "Role, company",
          },
          {
            rating: 4.5,
            ratingLabel: "Rated 4.5 out of 5",
            quote:
              "Example review. Ask customers for permission before you publish their name and quote.",
            image: placeholderImage,
            initials: "CE",
            name: "Customer E",
            role: "Role, company",
          },
          {
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
            quote:
              "Example review. Mention the service or product the customer used.",
            image: placeholderImage,
            initials: "CF",
            name: "Customer F",
            role: "Role, company",
          },
          {
            rating: 4.5,
            ratingLabel: "Rated 4.5 out of 5",
            quote:
              "Example review. Replace it with a short quote from a customer, in their own words.",
            image: placeholderImage,
            initials: "CG",
            name: "Customer G",
            role: "Role, company",
          },
          {
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
            quote:
              "Example review about the result a customer got, such as time saved or a problem solved.",
            image: placeholderImage,
            initials: "CH",
            name: "Customer H",
            role: "Role, company",
          },
          {
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
            quote:
              "Example review. Specific details, like what changed after working together, read as more credible.",
            image: placeholderImage,
            initials: "CI",
            name: "Customer I",
            role: "Role, company",
          },
          {
            rating: 4.5,
            ratingLabel: "Rated 4.5 out of 5",
            quote:
              "Example review. Keep quotes short enough to read at a glance.",
            image: placeholderImage,
            initials: "CJ",
            name: "Customer J",
            role: "Role, company",
          },
        ]}
        labels={{ play: "Play reviews", pause: "Pause reviews" }}
      />
    </>
  )
}
```

## Reviews 5

```tsx title="Usage of @fulldev/reviews-5 (react/gallery/blocks/reviews-5.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Reviews5 } from "@/components/blocks/reviews-5"

const placeholderImage = placeholder.src

export default function Reviews5Demo() {
  return (
    <>
      <Reviews5
        title="What customers say"
        description="Example reviews. Replace them with quotes from your customers."
        reviews={[
          {
            quote:
              "Example review. Replace it with a short quote from a customer, in their own words.",
            image: placeholderImage,
            initials: "CA",
            name: "Customer A",
            role: "Role, company",
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
          },
          {
            quote:
              "Example review about the result a customer got, such as time saved or a problem solved.",
            image: placeholderImage,
            initials: "CB",
            name: "Customer B",
            role: "Role, company",
            rating: 4.5,
            ratingLabel: "Rated 4.5 out of 5",
          },
          {
            quote:
              "Example review. Specific details, like what changed after working together, read as more credible.",
            image: placeholderImage,
            initials: "CC",
            name: "Customer C",
            role: "Role, company",
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
          },
          {
            quote:
              "Example review. Keep quotes short enough to read at a glance.",
            image: placeholderImage,
            initials: "CD",
            name: "Customer D",
            role: "Role, company",
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
          },
          {
            quote:
              "Example review. Ask customers for permission before you publish their name and quote.",
            image: placeholderImage,
            initials: "CE",
            name: "Customer E",
            role: "Role, company",
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
          },
          {
            quote:
              "Example review. Mention the service or product the customer used.",
            image: placeholderImage,
            initials: "CF",
            name: "Customer F",
            role: "Role, company",
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
          },
          {
            quote:
              "Example review. Replace it with a short quote from a customer, in their own words.",
            image: placeholderImage,
            initials: "CG",
            name: "Customer G",
            role: "Role, company",
            rating: 4.5,
            ratingLabel: "Rated 4.5 out of 5",
          },
          {
            quote:
              "Example review about the result a customer got, such as time saved or a problem solved.",
            image: placeholderImage,
            initials: "CH",
            name: "Customer H",
            role: "Role, company",
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
          },
          {
            quote:
              "Example review. Specific details, like what changed after working together, read as more credible.",
            image: placeholderImage,
            initials: "CI",
            name: "Customer I",
            role: "Role, company",
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
          },
          {
            quote:
              "Example review. Keep quotes short enough to read at a glance.",
            image: placeholderImage,
            initials: "CJ",
            name: "Customer J",
            role: "Role, company",
            rating: 4.5,
            ratingLabel: "Rated 4.5 out of 5",
          },
          {
            quote:
              "Example review. Ask customers for permission before you publish their name and quote.",
            image: placeholderImage,
            initials: "CK",
            name: "Customer K",
            role: "Role, company",
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
          },
          {
            quote:
              "Example review. Mention the service or product the customer used.",
            image: placeholderImage,
            initials: "CL",
            name: "Customer L",
            role: "Role, company",
            rating: 5,
            ratingLabel: "Rated 5 out of 5",
          },
        ]}
        labels={{ play: "Play reviews", pause: "Pause reviews" }}
      />
    </>
  )
}
```

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/reviews-1 @fulldev/reviews-2 @fulldev/reviews-3 @fulldev/reviews-4 @fulldev/reviews-5
```