Review Card Portrait React component
A portrait-format testimonial card with a crossfading top image strip, counter, thumbnail selector, and an animated quote with name/role, plus prev/next navigation and optional autoplay.
About the Review Card Portrait component
Review Card Portrait is a free, portrait-format testimonial card: a cross-fading image strip at the top with a counter and thumbnail selector, and underneath an animated quote with the person's name and role, previous/next buttons and optional autoplay.
Slide changes are announced through a live region, arrow keys navigate, and it emits schema.org Review data for each review with your reviewSubject.
When to use it
Use it where space is narrow: a sidebar, a column beside a form, a mobile-first landing page, or next to a pricing table.
Installation
Add the Review Card Portrait component to your project with the shadcn CLI. It lands in components/review-card-portrait.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/review-card-portraitOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<ReviewCardPortrait /> accepts 6 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| reviewSubject Business or product these reviews are about, named in the schema.org Review markup search engines read. | string | — |
| reviews | { src: string; name?: string; role?: string; quote?: string }[] | DEFAULT_REVIEWS |
| theme | "light" | "dark" | "light" |
| sectionLabel | string | "Reviews" |
| autoPlay | boolean | false |
| autoPlayInterval | number | 5 |
- reviewSubject
Business or product these reviews are about, named in the schema.org Review markup search engines read.
string - reviews{ src: string; name?: string; role?: string; quote?: string }[]Default: DEFAULT_REVIEWS
- theme"light" | "dark"Default: "light"
- sectionLabelstringDefault: "Reviews"
- autoPlaybooleanDefault: false
- autoPlayIntervalnumberDefault: 5
Collections
Use-case pages that compare Review Card Portrait with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Review Card Portrait FAQ
- What does each review need?
- src for the image, plus the quote and optionally name and role.
- Does it autoplay?
- Only with autoPlay; autoPlayInterval sets the seconds per review, and it pauses on hover and off screen.
- Is it accessible?
- Yes, arrow keys move between reviews and each change is announced to screen readers.
- Which themes are there?
- light (default) and dark.
