Testimonials and customer quotes
Quotes, reviews, ratings, videos and posts from the people who use it.
11 variants
Switch category
Marketing
- Hero17
- Features15
- Logo clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to action11
- FAQ7
- Newsletter12
- Banners9
- Popups and consent7
- Services7
- Use cases6
- Security and trust7
- Changelog and roadmap6
- Launch and waitlist6
- Product tour6
- Press and awards10
- AI features6
- App download5
- Donations and support4
- Problem and solution5
- Objections5
- Calculators10
- Quiz and product finder5
- Free trial5
- Referral and partners10
- Community5
- Open source5
- Manifesto5
- Offer5
- Lead magnet4
- Scroll stories20
- Scroll journeys13
- Scroll effects13
- Scroll reveals and transitions15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error pages5
- Careers7
- Case studies6
- Portfolio6
- Events and webinars6
- Help center6
- Legal pages5
- Documentation4
- Search results5
- Resources and downloads4
- Podcast4
- Editorial15
- Authors and interviews10
- Glossary5
- Recipes5
- Data stories10
- Long reads5
- Surveys and feedback14
- Form states12
- Request forms16
- Applications and sign-ups13
- Address, payment and consent12
App
- Authentication9
- Dashboards6
- Tables6
- Settings5
- AI and chat16
- Calendar5
- Inbox and messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing and usage10
- Developer settings15
- Security and access10
- Import, export and history15
- Automation and builders14
- AI answers18
- AI writing and creation13
- AI setup14
- AI assistants9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms and stays5
- Classes and schedules6
- Medical practice5
- Law firm5
- Salon and spa5
- Automotive5
- Travel5
- Sports club5
- Coworking5
- Museum5
- Cinema5
- School5
- Trades5
- Insurance5
- Banking5
- Personal brand15
- Speakers and media kits10
- Creators15
- Coaching and consulting10
- Artists and musicians15
- Dental practice5
- Veterinary practice5
- Therapy practice5
- Weddings and events5
- Architecture studio5
- Tax advisor5
- Estate agent5
- Florist5
- Winery5
- Daycare5
- Driving school5
- Care services5
- Festival5
Elements
- Buttons20
- Forms and inputs22
- Pickers and selections21
- Special input fields20
- Cards10
- Overlays21
- Navigation elements15
- Menu bars and switchers14
- Data display15
- Progress and states13
- Lists, trees and timelines17
- Charts22
- Comparison charts22
- Statistical charts20
- KPI, live and map charts22
- Text effects15
- Text accents16
- Backgrounds19
- Beams, particles and motion18
- Media19
- Code and JSON8
- Panels and splitters4
One strong quote or a wall of them
Testimonials let other people say what you cannot say about yourself. The eleven layouts here take quotes, names, roles, photos and ratings as data, and every rating is written out for screen readers instead of five bare stars.
Single quote is the strongest choice when you have one quote that says everything. Hairline grid and Masonry show six to twelve voices for products with many customers. Carousel and Marquee keep a long list in a small space, With rating summary adds the average and the count. Video quotes and Social posts bring proof that looks unedited, Case study quotes connect a quote with a number.
Use real names and roles, a quote without a person is worth little. Short quotes with one concrete result beat long praise. Put the section close to the action you want, right before pricing or the contact form, where doubt is highest.
Testimonials
Details
What Testimonials brings along, read from the registry and the source.
- Area
- Marketing
- Variants
- 11
- Version
- 1.0.1 · since 1.0.0
- File
- components/ui/testimonials.tsx
- Brings along
- utilskitbuttoniconrevealsectionnumber-tickermotion
- npm packages
- None
- Languages
- English and German, 19 texts of its own
- Studio
- All 11 variants editable
- In collections
- SaaS landing pageLocal businessPortfolio
- Build with AI
- Over MCP in Claude, Cursor, Copilot and Codex
Props
The TestimonialsProps interface from components/ui/testimonials.tsx, with the comments from the code.
variantoptionalTestimonialsVariantgridmasonrysingle-largecarouselmarqueewith-rating-summaryavatars-switchervideo-quotestweet-cardslogo-quotebento
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodeitemsrequiredTestimonial[]summaryoptionalRatingSummarywith-rating-summary: the aggregate on the left
actionoptional{ label: string; href: string }Link under the block, e.g. to all reviews
Built-in texts
Testimonials writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.
Show all 19 texts
| Key | English | German |
|---|---|---|
| previous | English Previous | German Zurück |
| next | English Next | German Weiter |
| carousel | English Customer stories | German Kundenstimmen |
| slide | English {n} of {total} | German {n} von {total} |
| rating | English {rating} out of 5 stars | German {rating} von 5 Sternen |
| basedOn | English Based on {count} reviews | German Aus {count} Bewertungen |
| stars | English {n} stars | German {n} Sterne |
| verified | English Verified purchase | German Bestätigter Kauf |
| play | English Play the video of {name} | German Video von {name} abspielen |
| close | English Close | German Schließen |
| transcript | English Transcript | German Abschrift |
| replies | English Replies | German Antworten |
| reposts | English Reposts | German Geteilt |
| likes | English Likes | German Gefällt mir |
| show | English Show the quote of {name} | German Zitat von {name} zeigen |
| filter | English Show only {n} star reviews | German Nur Bewertungen mit {n} Sternen zeigen |
| none | English No reviews with {n} stars yet. | German Noch keine Bewertungen mit {n} Sternen. |
| all | English Show all reviews | German Alle Bewertungen zeigen |
| like | English Like | German Gefällt mir |
Accessibility
Read from the source of the component.
- Testimonials handles the keys Arrow left, Arrow right, Home, End and Space itself.
- Built on the native dialog element. The browser keeps focus inside and closes it with Escape.
- Sets aria-controls, aria-current, aria-label, aria-labelledby, aria-live, aria-pressed, aria-roledescription and aria-selected, so screen readers announce purpose and state.
- Uses the roles img, region, tab, tablist and tabpanel.
- Announces changes through a live region without moving focus.
- Adds text for screen readers where icons and graphics stand alone.
- Shows a visible focus ring when used with the keyboard.
- The server renders the starting state in full, JavaScript only adds the interaction.
Motion
- Rises in briefly the first time it comes into view (kit-rise, useInView).
- Brings animations of its own, calmly timed and without wobble.
- With reduced motion (prefers-reduced-motion) it stays still. 16 places in the code switch motion off then.
Frequent questions
How do I install Testimonials?
With aiw add @ai-website/testimonials. The command puts components/ui/testimonials.tsx into your project, the code is yours from then on. It brings along button, icon, reveal, section, number-ticker and motion. It needs no further npm packages.
Which variants does Testimonials have?
11 variants, Hairline grid, Masonry, Single quote, Carousel, Marquee, With rating summary, Portrait switcher, Video quotes, Social posts, Case study quotes and Bento. You pick one with the variant prop, for example variant="masonry".
Can I translate the texts of Testimonials?
Yes. Testimonials carries 19 texts of its own in English and German, such as “Previous”, “Next” and “Customer stories”. The language follows the KitProvider, single texts change through the labels prop.
Can an AI assistant build with Testimonials?
Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Testimonials with aiw_components and install it with aiw_add @ai-website/testimonials. Name the variant in your prompt, for example variant="grid", and the assistant writes your content straight into the props.
Can I adjust Testimonials without code?
Yes, in the Studio. All 11 variants are editable there, texts, lists and switches. The Studio writes the matching Testimonials code to copy.
Similar components, Often combined with
Similar components
More from Marketing, the same area of the kit.
Often combined with
Sections that usually sit next to Testimonials on a page.
components/ui/testimonials.tsx
Loading the source