Does Testimonials Spotlight work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Testimonials Spotlight

One large quote at a time, with avatar buttons to switch between voices.

Type: Testimonials section
Styles: Dark, Gradient
Licence: Charcoal UI Pro

About Testimonials Spotlight

Testimonials Spotlight gives one large quote the stage at a time, with avatar buttons to switch voices and the text morphing between them.

It is a full-width testimonials section for React and Tailwind CSS 4, in a dark and gradient style. Preview it at any width above, then install it with one command.

When to use Testimonials Spotlight

Flagship customer stories.
Agency client quotes.
Founder endorsements.
Case-study pages.

How it is built

Text Morph animates between quotes, and the avatars are a radio group.

It is composed from Text Morph, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Testimonials Spotlight

Testimonials Spotlight is part of 2 full templates, so you can see it in a finished page.

Ashfall template: Work first. Words second.
Foundry template: Big agency work, small agency speed.
Testimonials Marquee: A React testimonials marquee: two rows of quotes drifting opposite ways
Testimonials Wall: A React testimonials wall: a masonry of quotes with ratings revealed on scroll
Testimonials Video: React video testimonial cards that expand with captions and progress on play
Testimonials Tweets: A React wall of social posts in masonry columns with a read-more fade
Text Morph: React text morph: shared letters glide to new spots while the rest blur in and out

Install Testimonials Spotlight

npx shadcn@latest add @charcoal/testimonials-spotlight

Testimonials Spotlight is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Testimonials Spotlight work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Text Morph: Morphs between strings: letters shared by both glide to their new spots, and the rest blur in and out.

Testimonials Spotlight as Markdown