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

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

```astro live props={{ name: 'reviews-1' }}
---
import Reviews1Block from "@/components/blocks/reviews-1.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Reviews1Block
  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",
    },
  ]}
/>
```

```astro live props={{ name: 'reviews-2' }}
---
import Reviews2Block from "@/components/blocks/reviews-2.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Reviews2Block
  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",
    },
  ]}
/>
```

```astro live props={{ name: 'reviews-3' }}
---
import Reviews3Block from "@/components/blocks/reviews-3.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Reviews3Block
  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",
  }}
/>
```

```astro live props={{ name: 'reviews-4' }}
---
import Reviews4Block from "@/components/blocks/reviews-4.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Reviews4Block
  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" }}
/>
```

```astro live props={{ name: 'reviews-5' }}
---
import Reviews5Block from "@/components/blocks/reviews-5.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Reviews5Block
  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" }}
/>
```

## Installation

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