Testimonial Spotlight

Testimonial card with spotlight effect on hover.

Loading…

Installation

$ pnpm dlx shadcn@latest add @ncdai/testimonial-spotlight

Usage

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

<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
        └── TestimonialAuthorTagline

API Reference

TestimonialSpotlight

Prop

Type

Styling

CSS Variables

Variable	Meaning
`--spotlight-color`	The color of the spotlight effect.
`--spotlight-size`	The size of the spotlight effect, defined as the radius of the radial gradient.

Examples

Custom color

Use the spotlightColor prop to change the spotlight color.

Loading…

Alternatively, you can override the color using the --spotlight-color CSS variable. This is useful when you want to control the color from a parent element or a stylesheet without passing a prop.

<TestimonialSpotlight className="[--spotlight-color:rgba(219,39,119,0.2)] dark:[--spotlight-color:rgba(219,39,119,0.15)]">
  ...
</TestimonialSpotlight>

Or with inline style:

<TestimonialSpotlight
  style={
    { "--spotlight-color": "rgba(219, 39, 119, 0.15)" } as React.CSSProperties
  }
>
  ...
</TestimonialSpotlight>

The --spotlight-color CSS variable takes precedence over the spotlightColor prop.

Command Palette