Testimonial

VegaStack cut our design-to-ship time in half — one registry, tokens everywhere.

A. RiveraCTO, Example Co.

Install

Add Testimonial from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.

pnpm dlx shadcn@latest add @vegastack/testimonial

Usage

import { Testimonial } from "@/components/ui/testimonial";

<Testimonial
  quote="VegaStack cut our design-to-ship time in half."
  name="A. Rivera"
  role="CTO, Example Co."
/>;

Examples

VegaStack cut our design-to-ship time in half — one registry, tokens everywhere.

A. RiveraCTO, Example Co.

Without a role

role is optional — omit it for a bare name attribution.

It just works.

J. Chen

The quote renders font-serif italic at text-display-sm — the Newsreader display-emphasis accent, reserved for display emphasis words and pull-quotes ONLY (audit 17-brand-direction §Typography roles), never running body text. Testimonial is one of the two sanctioned uses (the other is a single emphasis span inside SectionHeader).

API Reference

Prop	Type	Default	Description
`name`*	`React.ReactNode`	—	Attributed name.
`quote`*	`React.ReactNode`	—	The quote text, WITHOUT its own quotation marks — it renders inside a `<q>`, so the browser inserts the pair the ACTIVE LANGUAGE uses (`„…“`, `« … »`, `「…」`) rather than English curly quotes everywhere. Set `lang` on this element or an ancestor to pick the pair. Rendered serif italic (`font-serif italic`, the Newsreader display-emphasis accent) at `text-display-sm` — the sanctioned pull-quote use of the serif accent (audit 17-brand-direction §Typography roles: display emphasis + pull-quotes ONLY, never running body text).
`role`	`React.ReactNode`	—	Optional role/affiliation (e.g. `"CTO, Acme"`).

Data attributes and CSS variables on Testimonial

Attribute	Values
`data-slot`	`"testimonial" \| "testimonial-attribution" \| "testimonial-name" \| "testimonial-quote" \| "testimonial-role"`

Accessibility

Renders a semantic <figure> / <blockquote> / <figcaption> structure — the quote is a real <blockquote>, the attribution a real <figcaption>.
Pass quote WITHOUT its own quotation marks — it renders inside a <q>, so the browser inserts the pair the ACTIVE LANGUAGE uses („…“, « … », 「…」) rather than English curly quotes everywhere. Set lang on the element or an ancestor to pick the pair. The marks are not in the text content, so a copy of the quote is clean automatically.
The decorative middot between name and role is aria-hidden.

Contract	States tested
Behaviour	`default`
Accessibility	`native-or-base-ui-semantics`, `browser-accessibility-test`
Visual	`default`

Do / Don't

Keep the quote short — it's a display-scale pull-quote, not a paragraph.

Don't

Wrap the quote text in your own quotation marks — Testimonial adds the locale's own pair for you.