Testimonial — uicraft

Simple Quote

Minimal testimonial with quote and attribution.

html

"This product has completely transformed how our team collaborates. We've seen a 40% increase in productivity since switching."

Sarah Johnson

CEO at TechCorp

<div class="uc-max-w-md uc-mx-auto uc-text-center">
  <svg class="uc-w-8 uc-h-8 uc-text-fg-disabled/30 uc-mx-auto uc-mb-4">...</svg>
  <p class="uc-text-base uc-leading-relaxed uc-mb-4">"Quote text here."</p>
  <div>
    <p class="uc-text-sm uc-font-semibold">Author Name</p>
    <p class="uc-text-xs uc-text-fg-disabled">Role at Company</p>
  </div>
</div>

With Avatar

Testimonial with user avatar and role.

html

JD

John Doe

Product Designer at Figma

"The component library saved us weeks of development time. The quality and consistency is outstanding. Highly recommend for any design system."

<div class="uc-max-w-md uc-mx-auto">
  <div class="uc-rounded-2xl uc-border uc-p-6">
    <div class="uc-flex uc-items-center uc-gap-3 uc-mb-4">
      <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-tint-blue uc-flex uc-items-center uc-justify-center">
        <span class="uc-text-sm uc-font-semibold uc-text-accents-blue">JD</span>
      </div>
      <div>
        <p class="uc-text-sm uc-font-semibold">John Doe</p>
        <p class="uc-text-xs uc-text-fg-disabled">Product Designer</p>
      </div>
    </div>
    <p class="uc-text-sm uc-leading-relaxed uc-text-fg-tertiary">"Testimonial quote text."</p>
    <div class="uc-flex uc-items-center uc-gap-0.5 uc-mt-4">
      <svg class="uc-w-4 uc-h-4 uc-text-accents-orange">...</svg>
      <svg class="uc-w-4 uc-h-4 uc-text-accents-orange">...</svg>
      <svg class="uc-w-4 uc-h-4 uc-text-accents-orange">...</svg>
      <svg class="uc-w-4 uc-h-4 uc-text-accents-orange">...</svg>
      <svg class="uc-w-4 uc-h-4 uc-text-accents-orange">...</svg>
    </div>
  </div>
</div>

Testimonial Grid

Multiple testimonials in a grid layout.

html

"Absolutely love it! The design quality is top-notch and it saved us so much time."

AK

Alex Kim

Frontend Dev

"Best investment we made this year. The team onboarding was smooth and painless."

ML

Maria Lopez

CTO at StartupXYZ

"Clean, well-documented, and easy to customize. Exactly what we needed."

TP

Tom Park

Lead Engineer

"Customer support is incredible. They helped us migrate in under a day."

EN

Emma Nash

PM at DesignCo

<div class="uc-grid uc-grid-cols-1 uc-sm:grid-cols-2 uc-gap-4">
  <div class="uc-rounded-2xl uc-border uc-p-5">
    <div class="uc-flex uc-items-center uc-gap-0.5 uc-mb-3">
      <svg class="uc-w-3.5 uc-h-3.5 uc-text-accents-orange">...</svg>
      <svg class="uc-w-3.5 uc-h-3.5 uc-text-accents-orange">...</svg>
      <svg class="uc-w-3.5 uc-h-3.5 uc-text-accents-orange">...</svg>
      <svg class="uc-w-3.5 uc-h-3.5 uc-text-accents-orange">...</svg>
      <svg class="uc-w-3.5 uc-h-3.5 uc-text-accents-orange">...</svg>
    </div>
    <p class="uc-text-sm uc-leading-relaxed uc-mb-4">"Quote text."</p>
    <div class="uc-flex uc-items-center uc-gap-2">
      <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-tint-blue uc-flex uc-items-center uc-justify-center">
        <span class="uc-text-xs uc-font-semibold uc-text-accents-blue">AK</span>
      </div>
      <div>
        <p class="uc-text-xs uc-font-semibold">Alex Kim</p>
        <p class="uc-text-[10px] uc-text-fg-disabled">Frontend Dev</p>
      </div>
    </div>
  </div>
</div>

Large Featured

Hero-style testimonial for landing pages.

html

"We replaced three different tools with this single platform. The ROI was visible within the first month. I can't imagine going back to our old workflow."

RW

Rachel Williams

VP of Engineering at ScaleUp Inc.

<div class="uc-max-w-lg uc-mx-auto uc-text-center uc-py-8">
  <div class="uc-flex uc-items-center uc-justify-center uc-gap-0.5 uc-mb-6">
    <svg class="uc-w-5 uc-h-5 uc-text-accents-orange">...</svg>
    <svg class="uc-w-5 uc-h-5 uc-text-accents-orange">...</svg>
    <svg class="uc-w-5 uc-h-5 uc-text-accents-orange">...</svg>
    <svg class="uc-w-5 uc-h-5 uc-text-accents-orange">...</svg>
    <svg class="uc-w-5 uc-h-5 uc-text-accents-orange">...</svg>
  </div>
  <p class="uc-text-lg uc-leading-relaxed uc-mb-6">"Featured quote text."</p>
  <div class="uc-w-14 uc-h-14 uc-rounded-full uc-bg-tint-blue uc-flex uc-items-center uc-justify-center uc-mx-auto uc-mb-3">
    <span class="uc-text-lg uc-font-semibold uc-text-accents-blue">RW</span>
  </div>
  <p class="uc-text-sm uc-font-semibold">Rachel Williams</p>
  <p class="uc-text-xs uc-text-fg-disabled">VP of Engineering</p>
</div>

API Reference

All CSS classes available for the Testimonial component.

Class	Type	Description
`uc-max-w-md`	Layout	Constrains testimonial card width
`uc-text-center`	Layout	Centers quote text and attribution
`uc-rounded-2xl`	Style	Large border radius for card variant
`uc-border-border-default`	Style	Subtle border for card variant
`uc-text-fg-tertiary`	Color	Muted color for quote text
`uc-text-fg-disabled`	Color	Subdued color for role/company text
`uc-text-accents-orange`	Color	Star rating color
`uc-bg-tint-blue`	Color	Avatar background tint
`uc-text-accents-blue`	Color	Avatar initials color
`uc-grid uc-grid-cols-1 uc-sm:grid-cols-2`	Layout	Responsive grid for multiple testimonials

Accessibility

Keyboard and screen reader support.

Feature	Details
Semantics	Use blockquote and cite elements for testimonial quotes
Images	Author avatars need alt text with the person name
Structure	Group testimonials in a section with heading for context