Reviews React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Reviews is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import Reviews from @/components/ui/reviews.

import { Reviews, type ReviewData, type ReviewsLabels } from "@/components/ui/reviews"

const labels: Partial<ReviewsLabels> = {
  title: "Customer reviews",
  write: "Review this product",
}

const reviews: ReviewData[] = [
  {
    id: "r1",
    author: { name: "Julia Davis", avatar: "/demo/ioana-dumitrescu.jpg" },
    rating: 5,
    title: "Exactly what I wanted",
    body: "Fast delivery with UPS, and the bike arrived almost assembled.",
    date: "2026-09-22T10:15:00",
    photos: ["/demo/bicycle.jpg"],
    verified: true,
    helpfulCount: 12,
  },
]

export function ProductReviews() {
  return (
    <Reviews
      reviews={reviews}
      summary={{ average: 4.6, count: 126, distribution: [92, 21, 7, 3, 3] }}
      tone="warning"
      labels={labels}
      onHelpfulChange={async (id, helpful) => {
        const res = await fetch(`/api/reviews/${id}/helpful`, { method: helpful ? "POST" : "DELETE" })
        if (!res.ok) throw new Error("vote failed")
      }}
      onWriteReview={() => {}}
    />
  )
}

Props

• reviewsdefault "[]"
  ReviewData[]

  The loaded page of reviews (empty shows the empty state): { id, author: { name, avatar?, href? }, rating, title?, body?, date, photos?, verified?, helpfulCount?, helpful?, reply?: { author, body, date? }, meta?, context? }.

• summarydefault "summarizeRatings(reviews)"
  ReviewsSummaryData

  { average, count, distribution: [n5, n4, n3, n2, n1], aspects?, photoCount? }. Pass the server's numbers when the list is paged; the bars always use count for their proportions and the average shows one decimal.

• layoutdefault "split"
  "split" | "stacked"

  split: on a container of 768px or more the summary becomes a sticky column beside the list. stacked: the summary sits above the list, with the average beside the bars once there is room.

• showSummarydefault true
  boolean

  The average, the stars, the count and the breakdown.

• showDistributiondefault true
  boolean

  The 5 to 1 star bars in the summary.

• filterabledefault true
  boolean

  The bars become toggle buttons and the chips row appears (All, With photos, one chip per star).

• sortabledefault true
  boolean

  The sort select above the list (a bottom sheet on phones).

• defaultSortdefault "relevant"
  "relevant" | "newest" | "highest" | "lowest"

  The starting order. relevant keeps the order the reviews came in; the others sort the loaded reviews (ties newest first).

• sort
  ReviewsSort

  Controlled sort.

• onSortChange
  (sort: ReviewsSort) => void

  Called when a person picks an order. When given, the list is not sorted locally: reload it in the new order.

• filter
  ReviewsFilter

  Controlled filter, { rating?: 1 to 5; withPhotos?: boolean }.

• defaultFilterdefault "{}"
  ReviewsFilter

  The starting filter. Filters apply to the loaded reviews; a caller that reloads per filter gets the same result.

• onFilterChange
  (filter: ReviewsFilter) => void

  Called when a bar or a chip changes the filter.

• onHelpfulChange
  ((id: string, helpful: boolean) => void | Promise<unknown>)

  Shows the Helpful vote on every review. It flips at once; return a promise to keep it pending, and a rejection rolls it back and announces labels.helpfulError.

• onReport
  (id: string) => void

  Shows a Report button on every review.

• onWriteReview
  () => void

  Shows "Write a review" in the summary and in the empty state.

• maxLinesdefault 4
  number

  Lines of a review's text before "Show more". The toggle only appears when the text is longer.

• photoLightboxdefault true
  boolean

  Review photos are buttons that open a full-screen viewer (zoom, swipe, swipe down to close).

• loadingdefault false
  boolean

  First load: a skeleton summary and skeleton reviews in the real shape.

• skeletonCountdefault 3
  number

  Skeleton reviews while loading.

• hasMoredefault false
  boolean

  Shows a full-width "Show more reviews" button with "Showing 8 of 126" under the list.

• onLoadMore
  (() => void | Promise<unknown>)

  Loads the next page. A returned promise shows the loading state until it settles.

• loadingMoredefault false
  boolean

  The next page is loading (for callers that do not return a promise). Shows with hasMore.

• emptyState
  ReactNode

  Replaces the default empty state ("No reviews yet" with a Write a review action).

• error
  ReactNode

  Shows an error state with the message in place of the list.

• onRetry
  () => void

  Adds a Try again button to the error state.

• sizedefault "md"
  "sm" | "md"

  md for a product page; sm for sheets, sidebars and seller cards (a 32px average, smaller stars, 56px photos).

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The stars, the bars and a voted Helpful chip. neutral is black / white; amber stars are tone="warning".

• colordefault ""
  string

  Any CSS color for the stars and bars; replaces the tone.

• nowdefault "useNow()"
  number | null

  The reference time in ms for "2 days ago"; older than 28 days prints the date. null prints dates only. A timestamp, so it stays out of the playground.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for author.href (pass next/link's Link). Defaults to the one given to LinkProvider (lib/navigation), else a plain <a>.

• localedefault ""
  string

  Numbers and dates ("4.6", "126", "9/22/2026"). Empty uses the app's or the browser's locale.

• labels
  Partial<ReviewsLabels>

  Every string, English by default: title, average(value), count(n, formatted), stars(n), all, withPhotos(n, formatted), filters, distribution, aspects, sort, sortOptions, verified, helpful, helpfulCount, helpfulError, report, reply, showMore, showLess, write, empty, emptyDescription, emptyFiltered, emptyFilteredDescription, showAll, errorTitle, retry, loadMore, loadingMore, remaining, showing, photos, photo(i, n), photoError.

• lightboxLabels
  Partial<ImageLightboxLabels>

  Strings of the full-screen photo viewer (close, next, previous, zoom…).

• classNames
  Partial<Record<"summary" | "distribution" | "bar" | "toolbar" | "list" | "review" | "photos" | "reply" | "footer", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root, merged last.

Parts

FAQ

Used in

More React commerce components