Command Palette

Search for a command to run...

1.4k
Blog
PreviousNext

Testimonial

A testimonial component for displaying user feedback with author information and verified badge.

Loading...
import {
  Testimonial,
  TestimonialAuthor,
  TestimonialAuthorName,
  TestimonialAuthorTagline,
  TestimonialAvatar,
  TestimonialAvatarImg,
  TestimonialAvatarRing,
  TestimonialQuote,
  TestimonialVerifiedBadge,
} from "@/components/ncdai/testimonial"
 
export function TestimonialDemo() {
  return (
    <a
      href="https://x.com/rauchg/status/1978913158514237669"
      target="_blank"
      rel="noopener noreferrer"
      className="block w-80 max-w-full rounded-xl border bg-card ring-1 ring-border/50 ring-offset-2 ring-offset-background transition-[background-color] ease-out hover:bg-accent/60"
    >
      <Testimonial>
        <TestimonialQuote>
          <p>
            awesome. Love the components, especially slide-to-unlock. Great job
          </p>
        </TestimonialQuote>
 
        <TestimonialAuthor>
          <TestimonialAvatar>
            <TestimonialAvatarImg
              src="https://pbs.twimg.com/profile_images/1783856060249595904/8TfcCN0r_400x400.jpg"
              alt="Guillermo Rauch"
            />
            <TestimonialAvatarRing />
          </TestimonialAvatar>
 
          <TestimonialAuthorName>
            Guillermo Rauch
            <TestimonialVerifiedBadge />
          </TestimonialAuthorName>
          <TestimonialAuthorTagline>CEO @Vercel</TestimonialAuthorTagline>
        </TestimonialAuthor>
      </Testimonial>
    </a>
  )
}

Installation

$ pnpm dlx shadcn add @ncdai/testimonial

Usage

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

Examples

Testimonials Marquee

https://chanhdai.com/components/testimonials-marquee