# Highlight Testimonial Section

> Highlight testimonial section for React and Tailwind CSS (shadcn/ui) that sweeps a highlight across the key phrase of each customer quote and lifts that phrase into the section headline. It is built to let visitors read why customers are happy in one line before they read the full quote. A testimonial section is a social-proof block that displays customer quotes with names and roles; this one takes testimonials with a quote, a highlight phrase, an author, a role and an optional avatar, wraps the phrase in a mark element, animates the highlight with a background-size sweep and promotes it into the headline with a FLIP translate and scale animation using the Web Animations API. Supports controlled and uncontrolled index, an optional auto-rotate interval that pauses on hover and focus, dot and arrow navigation with arrow keys, carousel ARIA semantics with a polite live headline, light and dark highlight tokens from the shadcn chart palette, and a reduced motion fallback. Use it on landing pages, pricing pages, case studies and onboarding screens. The included demo rotates three sample quotes and makes no requests. Requires React and lucide-react, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Testimonials, Social Proof, Quote, Section, Animation
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/highlight-testimonial-section

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/highlight-testimonial-section?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/testimonials.md