Testimonials und Kundenstimmen
Zitate, Bewertungen, Sterne, Videos und Beiträge der Menschen, die es nutzen.
11 Variants
Kategorie wechseln
Marketing
- Hero17
- Features15
- Logo Clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to Action11
- FAQ7
- Newsletter12
- Banners9
- Popups und Consent7
- Services7
- Use Cases6
- Security und Trust7
- Changelog und Roadmap6
- Launch und Waitlist6
- Product Tour6
- Press und Awards10
- AI Features6
- App Download5
- Spenden und Unterstützen4
- Problem und Lösung5
- Einwände5
- Rechner10
- Quiz und Produktberater5
- Kostenlos testen5
- Empfehlung und Partner10
- Community5
- Open Source5
- Manifest5
- Angebot5
- Lead-Magnet4
- Scroll-Geschichten20
- Scroll-Reisen13
- Scroll-Effekte13
- Scroll-Reveals und Übergänge15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error Pages5
- Careers7
- Case Studies6
- Portfolio6
- Events und Webinars6
- Help Center6
- Rechtstexte5
- Dokumentation4
- Suchergebnisse5
- Ressourcen und Downloads4
- Podcast4
- Redaktion15
- Autoren und Interviews10
- Glossar5
- Rezepte5
- Datengeschichten10
- Long Reads5
- Umfragen und Feedback14
- Formularzustände12
- Anfrageformulare16
- Bewerbungen und Anmeldungen13
- Adresse, Zahlung und Einwilligung12
App
- Auth9
- Dashboards6
- Tables6
- Settings5
- AI und Chat16
- Calendar5
- Inbox und Messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing und Usage10
- Developer Settings15
- Security und Zugriff10
- Import, Export und Verlauf15
- Automation und Builder14
- KI-Antworten18
- KI-Schreiben und Erstellen13
- KI-Einrichtung14
- KI-Assistenten9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms und Stays5
- Classes und Schedules6
- Arztpraxis5
- Kanzlei5
- Salon und Spa5
- Autohaus5
- Reisen5
- Sportverein5
- Coworking5
- Museum5
- Kino5
- Schule5
- Handwerk5
- Versicherung5
- Bank5
- Personal Brand15
- Speaker und Media Kits10
- Creator15
- Coaching und Beratung10
- Kunst und Musik15
- Zahnarztpraxis5
- Tierarztpraxis5
- Therapiepraxis5
- Hochzeiten und Events5
- Architekturbüro5
- Steuerberatung5
- Immobilienmakler5
- Blumenladen5
- Weingut5
- Kita5
- Fahrschule5
- Pflege5
- Festival5
Elements
- Buttons20
- Forms und Inputs22
- Picker und Auswahlfelder21
- Spezielle Eingabefelder20
- Cards10
- Overlays21
- Navigation15
- Menüleisten und Umschalter14
- Data Display15
- Fortschritt und Zustände13
- Listen, Bäume und Timelines17
- Charts22
- Vergleichs-Charts22
- Statistik-Charts20
- KPI-, Live- und Karten-Charts22
- Text Effects15
- Textakzente16
- Backgrounds19
- Beams, Partikel und Bewegung18
- Media19
- Code und JSON8
- Panels und Splitter4
Ein starkes Zitat oder viele Stimmen
Kundenstimmen sagen, was du über dich selbst nicht sagen kannst. Die elf Layouts hier nehmen Zitate, Namen, Rollen, Fotos und Bewertungen als Daten, und jede Bewertung steht für Screenreader als Text da statt als fünf stumme Sterne.
„Ein Zitat“ ist die stärkste Wahl, wenn ein einziger Satz alles sagt. Das Haarlinien-Raster und das Mauerwerk zeigen sechs bis zwölf Stimmen für Produkte mit vielen Kunden. Karussell und Laufband bringen eine lange Liste auf wenig Platz, „Mit Bewertungsübersicht“ ergänzt Durchschnitt und Anzahl. Video-Stimmen und Beiträge liefern Belege, die ungeschönt wirken, Fallstudien-Zitate verbinden ein Zitat mit einer Zahl.
Nutze echte Namen und Rollen, ein Zitat ohne Person zählt wenig. Kurze Zitate mit einem konkreten Ergebnis wirken stärker als langes Lob. Setz die Section nah an die gewünschte Aktion, direkt vor Preise oder Kontaktformular, dort ist der Zweifel am größten.
Stimmen
Details
Was Stimmen mitbringt, aus Registry und Quellcode gelesen.
- Bereich
- Marketing
- Variants
- 11
- Version
- 1.0.1 · seit 1.0.0
- Datei
- components/ui/testimonials.tsx
- Bringt mit
- utilskitbuttoniconrevealsectionnumber-tickermotion
- npm-Pakete
- Keine
- Sprachen
- Englisch und Deutsch, 19 eigene Texte
- In Sammlungen
- SaaS-LandingpageLokales GeschäftPortfolio
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle TestimonialsProps aus components/ui/testimonials.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
variantoptionalTestimonialsVariantgridmasonrysingle-largecarouselmarqueewith-rating-summaryavatars-switchervideo-quotestweet-cardslogo-quotebento
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodeitemsPflichtTestimonial[]summaryoptionalRatingSummarywith-rating-summary: the aggregate on the left
actionoptional{ label: string; href: string }Link under the block, e.g. to all reviews
Eingebaute Texte
Diese Texte schreibt Stimmen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.
Alle 19 Texte anzeigen
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| previous | Englisch Previous | Deutsch Zurück |
| next | Englisch Next | Deutsch Weiter |
| carousel | Englisch Customer stories | Deutsch Kundenstimmen |
| slide | Englisch {n} of {total} | Deutsch {n} von {total} |
| rating | Englisch {rating} out of 5 stars | Deutsch {rating} von 5 Sternen |
| basedOn | Englisch Based on {count} reviews | Deutsch Aus {count} Bewertungen |
| stars | Englisch {n} stars | Deutsch {n} Sterne |
| verified | Englisch Verified purchase | Deutsch Bestätigter Kauf |
| play | Englisch Play the video of {name} | Deutsch Video von {name} abspielen |
| close | Englisch Close | Deutsch Schließen |
| transcript | Englisch Transcript | Deutsch Abschrift |
| replies | Englisch Replies | Deutsch Antworten |
| reposts | Englisch Reposts | Deutsch Geteilt |
| likes | Englisch Likes | Deutsch Gefällt mir |
| show | Englisch Show the quote of {name} | Deutsch Zitat von {name} zeigen |
| filter | Englisch Show only {n} star reviews | Deutsch Nur Bewertungen mit {n} Sternen zeigen |
| none | Englisch No reviews with {n} stars yet. | Deutsch Noch keine Bewertungen mit {n} Sternen. |
| all | Englisch Show all reviews | Deutsch Alle Bewertungen zeigen |
| like | Englisch Like | Deutsch Gefällt mir |
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Stimmen reagiert selbst auf die Tasten Pfeil links, Pfeil rechts, Pos1, Ende und Leertaste.
- Baut auf dem nativen dialog-Element auf. Der Browser hält den Fokus im Fenster und schließt es mit Escape.
- Setzt aria-controls, aria-current, aria-label, aria-labelledby, aria-live, aria-pressed, aria-roledescription und aria-selected, damit Screenreader Zweck und Zustand ansagen.
- Nutzt die Rollen img, region, tab, tablist und tabpanel.
- Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
- Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
- Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
- Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.
Bewegung
- Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
- Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
- Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 16 Stellen im Code schalten Bewegung dann ab.
Häufige Fragen
Wie installiere ich Stimmen?
Mit aiw add @ai-website/testimonials. Der Befehl legt die Datei components/ui/testimonials.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, reveal, section, number-ticker und motion. Weitere npm-Pakete braucht sie nicht.
Welche Varianten hat Stimmen?
11 Varianten, Haarlinien-Raster, Mauerwerk, Ein Zitat, Karussell, Laufband, Mit Bewertungsübersicht, Porträt-Umschalter, Video-Stimmen, Beiträge, Fallstudien-Zitate und Bento. Du wählst sie mit der Prop variant, zum Beispiel variant="masonry".
Kann ich die Texte von Stimmen übersetzen?
Ja. Stimmen bringt 19 eigene Texte auf Deutsch und Englisch mit, etwa „Zurück“, „Weiter“ und „Kundenstimmen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.
Kann ein KI-Assistent Stimmen einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Stimmen mit aiw_components und installieren sie mit aiw_add @ai-website/testimonials. Nenn im Prompt die Variante, etwa variant="grid", dann schreibt der Assistent deine Inhalte direkt in die Props.
Kann ich Stimmen ohne Code anpassen?
Ja, im Studio. Alle 11 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Testimonials-Code zum Kopieren.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus Marketing, demselben Bereich des Kits.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Testimonials stehen.
components/ui/testimonials.tsx
Quellcode lädt