# Modern SaaS Testimonial: Review Card Wall

A heading row over two rows of review cards scrolling in opposite directions, each with amber stars, a title, two lines and a face.

- Page: https://www.shadcn-ui-blocks.com/blocks/modern-saas/testimonials/review-card-wall
- Collection: [Modern SaaS](https://www.shadcn-ui-blocks.com/blocks/modern-saas), Premium tier
- Group: [Testimonials](https://www.shadcn-ui-blocks.com/blocks/modern-saas/testimonials)
- Created: 2026-11-02
- Preview image: https://www.shadcn-ui-blocks.com/blocks/modern-saas/testimonials/review-card-wall.png

## Install

```bash
npx shadcn@latest add @shadcn-ui-blocks/modern-saas-testimonials-review-card-wall
```

Needs an API key from a Pro or Team plan: add `@shadcn-ui-blocks` to the registries in components.json with the key as an `Authorization: Bearer` header. Setup: https://www.shadcn-ui-blocks.com/docs/shadcn-cli. The MCP server installs it without the setup: https://www.shadcn-ui-blocks.com/docs/mcp.

## Depends on

- npm packages: class-variance-authority, lucide-react, radix-ui
- shadcn/ui components: avatars, depth-button, surface
- Installs to: `@/components/blocks/modern-saas/testimonials/review-card-wall`

## About this block

Review Card Wall shows reviews from a ratings site as a marquee of cards that
fades out at the edges of the content column. A heading row opens it, and
below it two rows of Surface cards scroll in opposite directions, the second
half a card out of step with the first. The rows keep moving at one steady
speed and stand still for anyone who prefers reduced motion.

Each card carries five amber stars, a one line title, the review in two
lines and the reviewer: a face from the shared avatars, a name and a role.

## When to use

Use it when you have many short reviews and want the volume to show, such as
ratings from G2 or Capterra for a team tool. The moving rows carry more
reviews than fit on screen, and the pill leads to the full list.

A natural flow around it on a Modern SaaS page:

**Before**

- [Feature Sections](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections) that the reviews
  can confirm
- [Logo Clouds](https://www.shadcn-ui-blocks.com/blocks/modern-saas/logo-clouds) to show the companies behind
  the reviewers

**After**

- [Pricing sections](https://www.shadcn-ui-blocks.com/blocks/modern-saas/pricing-sections) while trust is
  high
- [CTAs](https://www.shadcn-ui-blocks.com/blocks/modern-saas/ctas) that start a trial

## What you can customize

- **Reviews.** Edit the `reviews` array: title, review, name, role and avatar.
  Keep every review to two lines at the card's full width so the cards in a
  row stay level.
- **Rows.** `rows` picks which reviews sit in each row; any count works, and
  each row keeps the same speed. Change the speed in `marqueeCss`, where a
  row takes sixteen seconds per card.
- **Fade.** `--fade` sets how far in from each edge of the column the cards
  fade out: 2rem on phones and 6rem from md.
- **Stars.** The stars are amber, a step brighter on dark, and the rating is
  read out to screen readers.

> Tip: lead the first row with the review that names your product, so the
> center card says who the wall is about.

## More in Modern SaaS Testimonials

- [Logo Tabs Spotlight](https://www.shadcn-ui-blocks.com/blocks/modern-saas/testimonials/logo-tabs-spotlight)
- [Pull Quote with Proof Stats](https://www.shadcn-ui-blocks.com/blocks/modern-saas/testimonials/pull-quote-proof-stats)
- [Quote Card Grid](https://www.shadcn-ui-blocks.com/blocks/modern-saas/testimonials/quote-card-grid)
- [Spotlight With Stats](https://www.shadcn-ui-blocks.com/blocks/modern-saas/testimonials/spotlight-with-stats)
- [Staggered Quote Masonry](https://www.shadcn-ui-blocks.com/blocks/modern-saas/testimonials/staggered-quote-masonry)