Testimonial

Display user feedback with author info, avatar, and verified badge.

Loading…

Use cases

Wall of love page with user feedback.
Social proof section on a landing page.
Building block for marquees and card grids.

Installation

pnpm dlx shadcn@latest add @ncdai/testimonial

Usage

import {
  Testimonial,
  TestimonialAuthor,
  TestimonialAuthorInfo,
  TestimonialAuthorName,
  TestimonialAuthorTagline,
  TestimonialAvatar,
  TestimonialAvatarImg,
  TestimonialAvatarRing,
  TestimonialQuote,
  TestimonialVerifiedBadge,
} from "@/components/testimonial"

<Testimonial>
  <TestimonialQuote />
 
  <TestimonialAuthor>
    <TestimonialAvatar>
      <TestimonialAvatarImg />
      <TestimonialAvatarRing />
    </TestimonialAvatar>
 
    <TestimonialAuthorName>
      <TestimonialVerifiedBadge />
    </TestimonialAuthorName>
 
    <TestimonialAuthorTagline />
  </TestimonialAuthor>
</Testimonial>

Composition

Use the following composition to build a Testimonial

Testimonial
├── TestimonialQuote
└── TestimonialAuthor
    ├── TestimonialAvatar
    │   ├── TestimonialAvatarImg
    │   └── TestimonialAvatarRing
    ├── TestimonialAuthorName
    │   └── TestimonialVerifiedBadge
    └── TestimonialAuthorTagline

Examples

License and usage

Free to use and modify in both personal and commercial projects.
Attribution is appreciated but not required.
Released under the MIT License.

Was this helpful?