shadcn
Creator of shadcn/ui
)
}
```
## Installation
```bash
npx shadcn@latest add @ncdai/testimonial-spotlight
```
Install the following dependencies
```bash
npm install clsx tailwind-merge
```
Add a cn helper
```ts title="lib/utils.ts"
import type { ClassValue } from "clsx"
import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs))
}
export function absoluteUrl(path: string) {
return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
}
```
Copy and paste the following code into your project
```tsx title="components/testimonial.tsx"
import type { ComponentProps } from "react"
import { cn } from "@/lib/utils"
export function Testimonial({ className, ...props }: ComponentProps<"figure">) {
return (
)
}
export function TestimonialQuote({
className,
...props
}: ComponentProps<"blockquote">) {
return (
)
}
export function TestimonialAuthor({
className,
...props
}: ComponentProps<"figcaption">) {
return (
)
}
export function TestimonialAvatar({
className,
...props
}: ComponentProps<"div">) {
return (
)
}
export function TestimonialAvatarImg({
className,
src,
alt,
...props
}: ComponentProps<"img">) {
return (
)
}
export function TestimonialAvatarRing({
className,
...props
}: ComponentProps<"div">) {
return (
)
}
export function TestimonialAuthorName({
className,
...props
}: ComponentProps<"div">) {
return (
)
}
export function TestimonialAuthorTagline({
className,
...props
}: ComponentProps<"div">) {
return (
)
}
export function TestimonialVerifiedBadge({
className,
...props
}: ComponentProps<"span">) {
return (
)
}
```
```tsx title="components/testimonial-spotlight.tsx"
"use client"
import { useRef } from "react"
import { cn } from "@/lib/utils"
export type TestimonialSpotlightProps = Omit<
React.ComponentPropsWithoutRef<"div">,
"children" | "onMouseMove"
> & {
children: React.ReactNode
}
export function TestimonialSpotlight({
children,
className,
...props
}: TestimonialSpotlightProps) {
const itemRef = useRef(null)
const handleMouseMove: React.MouseEventHandler = (e) => {
if (!itemRef.current) return
const rect = itemRef.current.getBoundingClientRect()
itemRef.current.style.setProperty(
"--spotlight-x",
`${e.clientX - rect.left}px`
)
itemRef.current.style.setProperty(
"--spotlight-y",
`${e.clientY - rect.top}px`
)
}
return (
{children}
)
}
```
Update the import paths to match your project setup
## Usage
```tsx
import {
Testimonial,
TestimonialAuthor,
TestimonialAuthorInfo,
TestimonialAuthorName,
TestimonialAuthorTagline,
TestimonialAvatar,
TestimonialAvatarImg,
TestimonialAvatarRing,
TestimonialQuote,
TestimonialVerifiedBadge,
} from "@/components/testimonial"
import { TestimonialSpotlight } from "@/components/testimonial-spotlight"
```
```tsx
```
## Composition
Use the following composition to build a `TestimonialSpotlight`
```text
TestimonialSpotlight
└── Testimonial
├── TestimonialQuote
└── TestimonialAuthor
├── TestimonialAvatar
│ ├── TestimonialAvatarImg
│ └── TestimonialAvatarRing
├── TestimonialAuthorName
│ └── TestimonialVerifiedBadge
└── TestimonialAuthorTagline
```
## API Reference
### TestimonialSpotlight
| 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:
```tsx
...
```
Or with inline style:
```tsx
...
```
Last updated on May 23, 2026