Testimonial card with spotlight effect on hover.
Installation
pnpm dlx shadcn@latest add @ncdai/testimonial-spotlight
Usage
import {
Testimonial,
TestimonialAuthor,
TestimonialAuthorInfo,
TestimonialAuthorName,
TestimonialAuthorTagline,
TestimonialAvatar,
TestimonialAvatarImg,
TestimonialAvatarRing,
TestimonialQuote,
TestimonialVerifiedBadge,
} from "@/components/testimonial"
import { TestimonialSpotlight } from "@/components/testimonial-spotlight"<TestimonialSpotlight>
<Testimonial>
<TestimonialQuote />
<TestimonialAuthor>
<TestimonialAvatar>
<TestimonialAvatarImg />
<TestimonialAvatarRing />
</TestimonialAvatar>
<TestimonialAuthorName>
<TestimonialVerifiedBadge />
</TestimonialAuthorName>
<TestimonialAuthorTagline />
</TestimonialAuthor>
</Testimonial>
</TestimonialSpotlight>Composition
Use the following composition to build a TestimonialSpotlight
TestimonialSpotlight
└── Testimonial
├── TestimonialQuote
└── TestimonialAuthor
├── TestimonialAvatar
│ ├── TestimonialAvatarImg
│ └── TestimonialAvatarRing
├── TestimonialAuthorName
│ └── TestimonialVerifiedBadge
└── TestimonialAuthorTaglineAPI Reference
TestimonialSpotlight
Prop
Type
| CSS Variable | Description | Default |
|---|---|---|
--spotlight-color | The color of the spotlight effect. | rgba(255,255,255,0.2) |
--spotlight-size | The size of the spotlight effect, defined as the radius of the radial gradient. | 60% |
--spotlight-opacity | The opacity of the spotlight effect when hovered. | 0.5 |
Examples
Custom color, size, and opacity
Tailwind CSS:
<TestimonialSpotlight
className={cn(
"[--spotlight-color:rgba(219,39,119,0.15)] dark:[--spotlight-color:rgba(255,255,255,0.2)]",
"[--spotlight-opacity:0.8] [--spotlight-size:50%]"
)}
>
...
</TestimonialSpotlight>Or with inline style:
<TestimonialSpotlight
style={
{
"--spotlight-color": "rgba(219,39,119,0.15)",
"--spotlight-size": "50%",
"--spotlight-opacity": "0.8",
} as React.CSSProperties
}
>
...
</TestimonialSpotlight>