All componentsGHGrace HopperCTO, Ledger
Testimonial
CardsA customer quote, as a bordered card or a plain pull quote.
“Dropped it in on Friday, shipped on Monday.”
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/testimonial.jsonOr install manually
1. Install dependencies
pnpm add clsx tailwind-merge2. Copy the component source into
components/library/testimonial.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| quote | string | - | The quoted text. |
| name | string | - | Who said it. |
| role | string | - | Their title or company. |
| avatar | string | - | Image URL; falls back to initials. |
| variant | "card" | "plain" | "card" | Bordered card, or a bare quote. |
Accessibility
- Uses <figure> and <figcaption>, so the attribution is tied to the quote.
- Falls back to text initials when no avatar is given.
- Avatars carry the person's name as alt text.
Dependencies
clsxtailwind-merge