Koala UITestimonials
A minimal quote card for social-proof walls. Named parts you assemble: an optional quote mark, the quote, an author row and an optional logo. Stars come from Rating, the headshot from Avatar.
Installation#
Usage#
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
Testimonial, TestimonialQuote, TestimonialFooter,
TestimonialAuthor, TestimonialName, TestimonialTitle,
} from "@/components/ui/testimonials"
export function Example() {
return (
<Testimonial>
<TestimonialQuote>
We replaced our in-house kit in a weekend and never looked back.
</TestimonialQuote>
<TestimonialFooter>
<Avatar size="md">
<AvatarImage src="https://i.pravatar.cc/160?img=13" alt="Alex Rivera" />
<AvatarFallback>AR</AvatarFallback>
</Avatar>
<TestimonialAuthor>
<TestimonialName>Alex Rivera</TestimonialName>
<TestimonialTitle>Founder, Lumen</TestimonialTitle>
</TestimonialAuthor>
</TestimonialFooter>
</Testimonial>
)
}Variants#
The default is plain: a flat, tinted surface with no border line or shadow. outline adds a hairline border, soft trades it for a subtle shadow, and elevated drops the border and lifts the card to feature one quote. There is also a borderless ghost for walls on a tinted section, and bare, which strips the surface and padding entirely so the quote sits flush on the page.
With a rating#
Drop our Rating with readOnly above the quote for star social proof.
Author on top#
Lead with the byline by rendering the TestimonialFooter first with className="mt-0": a compact, scannable layout for dense walls.
Divided, with a logo#
Set divided for a hairline rule above the author row, and drop a TestimonialLogo in the footer for a company wordmark; it sits flush to the trailing edge.
Logo-led#
Lead the card with the company logo instead of trailing it: drop a TestimonialLogo at the top and put a logo lockup inside it (here, a colored mark from the placeholder set). Outside a TestimonialFooter the logo stays on the start edge; it only pushes to the trailing edge inside the footer. Pairs well with variant="bare" for a logo wall.
Container-less#
The most minimal option: variant="bare" strips the surface entirely (no border, background, padding, or radius) so the quotes sit flush on the page with nothing but whitespace between them.
Centered pull-quote#
Pair variant="bare" with align="center" for a single standout quote: centers the mark, quote, and byline with no chrome at all.
Headline and size#
A TestimonialQuote followed by a TestimonialBody becomes the card's headline (semibold, full-strength ink) over the longer quote; drop the body and it reads as a plain pull-quote again. size sets the type scale: md (default) for dense grids and carousels, lg for landing rows and walls (an 18px headline over 16px body and byline), and xl for one quote given room beside a picture (24px over 18px). Pair the bigger steps with an lg Avatar.
Featured#
Drop a TestimonialMark in for a quotation glyph and use variant="elevated" to lift one standout quote.
API reference#
Testimonial
The root <figure> card. Provides the styling context to every part. variant is "plain" (default), "outline", "soft", "elevated", "ghost" (no surface, keeps padding), or "bare" (container-less: no surface or padding). align is "start" (default) or "center", and divided adds a rule above the footer. size is "md" (default), "lg" or "xl", the type scale of the quote, body and byline together. Accepts asChild.
TestimonialMark · TestimonialQuote · TestimonialBody
An optional decorative quote glyph, the <blockquote> itself, and the optional longer quote under it. A quote followed by a TestimonialBody styles itself as the headline.