Command Palette

Search for a command to run...

1.5k

Command Palette

Search for a command to run...

Components
PreviousNext

Testimonial Spotlight

Testimonial card with spotlight effect on hover.

Loading…
import { TestimonialSpotlight } from "@/components/testimonial-spotlight"
 
export default function TestimonialSpotlightDemo() {
  return (
    <TestimonialSpotlight
      className="w-72 max-w-full"
      authorAvatar="https://unavatar.io/x/shadcn"
      authorName="shadcn"
      authorTagline="Creator of shadcn/ui"
      url="https://x.com/shadcn/status/2032193591133495700"
      quote="You’re doing amazing work."
    />
  )
}

Installation

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

Usage

import { TestimonialSpotlight } from "@/components/testimonial-spotlight"
<TestimonialSpotlight
  authorAvatar="https://unavatar.io/x/shadcn"
  authorName="shadcn"
  authorTagline="Creator of shadcn/ui"
  url="https://x.com/shadcn/status/2032193591133495700"
  quote="You’re doing amazing work."
/>

API Reference

TestimonialSpotlight

Prop

Type

Examples

Custom color

Loading…
import { TestimonialSpotlight } from "@/components/testimonial-spotlight"
 
export default function TestimonialSpotlightDemo02() {
  return (
    <TestimonialSpotlight
      className="w-72 max-w-full"
      spotlightColor="rgba(219, 39, 119, 0.15)"
      authorAvatar="https://unavatar.io/x/shadcn"
      authorName="shadcn"
      authorTagline="Creator of shadcn/ui"
      url="https://x.com/shadcn/status/2032193591133495700"
      quote="You’re doing amazing work."
    />
  )
}