Testimonials
Testimonials is a ready-made neobrutalist section (block) from Cruise UI, built from its components. A testimonials block: quote cards with Avatar, name, role or location and a read-only Rating, in a grid (one card can be featured in --primary) or as a single large quote. Install it with npx shadcn@latest add @cruiseui/cruise-testimonials.
Install
Terminal
npx shadcn@latest add @cruiseui/cruise-testimonialsFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
Loved across Naija
“Orders doubled the month we switched. My customers say the site feels like our shop.”
AOAda OkaforShop owner, Yaba “Setup took an afternoon. Everything works on my customers' phones.”
TBTunde BelloFounder, Ibadan “Bold without being messy. Clients remember it.”
NENgozi EzeDesigner, Abuja
One customer's story
“We sold out the first weekend.”
import { CruiseTestimonials } from "@/components/cruise/blocks/testimonials";
export default function TestimonialsExample() {
return (
<div className="flex flex-col gap-12">
<CruiseTestimonials
title="Loved across Naija"
items={[
{ name: "Ada Okafor", role: "Shop owner, Yaba", quote: "Orders doubled the month we switched. My customers say the site feels like our shop.", rating: 5, featured: true },
{ name: "Tunde Bello", role: "Founder, Ibadan", quote: "Setup took an afternoon. Everything works on my customers' phones.", rating: 5 },
{ name: "Ngozi Eze", role: "Designer, Abuja", quote: "Bold without being messy. Clients remember it.", rating: 4 },
]}
/>
<CruiseTestimonials
variant="single"
title="One customer's story"
headingLevel={3}
items={[{ name: "Musa Garba", role: "Event planner, Port Harcourt", quote: "We sold out the first weekend.", rating: 5 }]}
/>
</div>
);
}
When to use it
When to use
Social proof on landing, pricing and product pages.
When not to
Made-up quotes. Use real customers' words, with their permission.
Props
CruiseTestimonials
| Prop | Type | Default | Description |
|---|---|---|---|
title? | ReactNode | "What people say" | — |
intro? | ReactNode | — | — |
items? | CruiseTestimonial[] | DEFAULT_ITEMS | — |
variant? | "single" | "grid" | "grid" | — |
headingLevel? | 2 | 3 | 2 | — |
className? | string | — | — |
Accessibility
- Each quote is a <figure> with the person in its <figcaption>.
- Ratings read as "Ada Okafor's rating: 5 out of 5".
- The featured card uses .on-primary so its text stays dark.