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>