A white testimonial card with an avatar, name, handle, serif quote and date that plays like a story: the active bar along the bottom fills, then the next quote fades in. Tap either side to step back or forward.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/story-testimonial
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { StoryTestimonial } from "@/components/nextui/story-testimonial";45export function Example() {6return (7<StoryTestimonial8interval={4200}9items={[10{ name: "Mara Ellison", handle: "@maraonbikes", quote: "I came in wanting a logo and left with a whole way of thinking about my brand.", date: "14.02.2026" },11{ name: "Theo Park", handle: "@theobuilds", quote: "Every call felt like a step forward.", date: "03.03.2026", avatar: "/avatars/theo.jpg" },12{ name: "Lina Okafor", handle: "@linaokafor", quote: "Honest feedback, kind delivery.", date: "21.04.2026" },13]}14/>15);16}
| Prop | Type | Default | Description |
|---|---|---|---|
| items | StoryTestimonialItem[] | five sample testimonials | Testimonials shown one at a time, each with a name, handle, quote, date and optional avatar URL; one bar per item |
| interval | number | 4200 | How long each testimonial stays up while its bar fills, in ms; pauses on hover |
| onActiveChange | (index: number) => void | – | Called with the index of the testimonial that came up |
| className | string | – | Extra class on the root |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.