Plain single testimonial: a large centered quote with the speaker's name and role below. Theme tokens only, light and dark.
import {
Quote,
QuoteAuthor,
QuoteAuthorName,
QuoteAuthorRole,
QuoteFigure,
} from "@/components/editorial/quote"
import {
Section,
SectionContent,
} from "@/components/editorial/section"
// The copy: change text here, not in the markup.
const COPY = {
quote:
"We used to lose a day every release to finding out who had signed off. Now the answer is on the page before anyone asks.",
name: "Mara Ilves",
role: "Head of Product, Lantern Row",
} as const
export default function MinimalTestimonials01() {
return (
<Section>
<SectionContent>
<QuoteFigure variant="centered">
<Quote size="xl">
<p>{COPY.quote}</p>
</Quote>
<QuoteAuthor>
<QuoteAuthorName>{COPY.name}</QuoteAuthorName>
<QuoteAuthorRole>{COPY.role}</QuoteAuthorRole>
</QuoteAuthor>
</QuoteFigure>
</SectionContent>
</Section>
)
}
pnpm dlx shadcn add @01orbital/minimal-testimonials-01npx shadcn add @01orbital/minimal-testimonials-01yarn shadcn add @01orbital/minimal-testimonials-01bunx --bun shadcn add @01orbital/minimal-testimonials-01Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/testimonials/minimal-testimonials-01/index.tsx, as source you own and edit.
import MinimalTestimonials01 from "@/components/blocks/testimonials/minimal-testimonials-01"
export default function Example() {
return <MinimalTestimonials01 />
}Registry pieces it installs with it:
Minimal Divided Testimonials
Plain testimonials: a heading above three quotes ruled apart, side by side on wide screens and stacked on narrow ones, each with a name and role. Theme tokens only, light and dark.
Minimal Testimonial Grid
Plain testimonials: a heading above three quotes on muted tiles, each with a name and role. Theme tokens only, light and dark.