Vergleichstabellen und Vorher und Nachher
Du gegen die anderen, vorher und nachher, bewertete Optionen, eine Funktionsmatrix und Für und Wider.
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
Den Unterschied sichtbar machen
Eine Vergleichs-Section hilft allen, die schon abwägen. Sie stellt dein Angebot neben die Alternative, oft ist das gar nichts tun oder alles von Hand, und zeigt den Unterschied auf einen Blick.
„Wir gegen die anderen“ listet Kriterien in Zeilen, dich und die Alternativen in Spalten. Die Funktionsmatrix macht das für viele Features zugleich. „Vorher und nachher“ stellt zwei Zustände gegenüber, den alten Weg und den neuen. Optionskarten bewerten drei Möglichkeiten für eine Entscheidung, „Für und Wider“ gibt einen ehrlichen Blick auf eine Option, das schafft Vertrauen.
Vergleich dich mit der Alternative, die deine Kunden wirklich erwägen. Halte die Kriterien sachlich und wenige, fünf bis acht Zeilen lesen sich gut. Jeder Haken und jedes Kreuz trägt Text für Screenreader, die Tabelle bleibt also auch ohne Icons klar.
Vergleich
Details
Was Vergleich mitbringt, aus Registry und Quellcode gelesen.
- Bereich
- Content
- Variants
- 5
- Version
- 1.0.1 · seit 1.0.0
- Datei
- components/ui/comparison.tsx
- npm-Pakete
- Keine
- Sprachen
- Englisch und Deutsch, 10 eigene Texte
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle ComparisonProps aus components/ui/comparison.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
variantoptionalComparisonVarianttablebefore-aftercardschecklist-matrixpros-cons
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodecolumnsoptionalComparisonColumn[]rowsoptionalComparisonRow[]beforeoptionalComparisonListafteroptionalComparisonListoptionsoptionalComparisonOption[]prosoptionalComparisonListconsoptionalComparisonListverdictoptional{ score?: number; text: string }For pros-cons: score from 0 to 10 and a sentence
actionoptional{ label: string; href: string }
Eingebaute Texte
Diese Texte schreibt Vergleich selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.
Alle 10 Texte anzeigen
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| feature | Englisch Feature | Deutsch Funktion |
| compareWith | Englisch Compare with | Deutsch Vergleichen mit |
| yes | Englisch Included | Deutsch Enthalten |
| no | Englisch Not included | Deutsch Nicht enthalten |
| partial | Englisch Partly | Deutsch Teilweise |
| recommended | Englisch Recommended | Deutsch Empfohlen |
| pros | Englisch Pros | Deutsch Dafür |
| cons | Englisch Cons | Deutsch Dagegen |
| verdict | Englisch Our verdict | Deutsch Unser Urteil |
| outOf | Englisch out of 10 | Deutsch von 10 |
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Setzt aria-label, damit Screenreader Zweck und Zustand ansagen.
- Nutzt die Rollen cell, columnheader, img, row, rowgroup, rowheader und table.
- Jedes Feld hat ein Label, sichtbar oder für Screenreader.
- 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. 7 Stellen im Code schalten Bewegung dann ab.
Häufige Fragen
Wie installiere ich Vergleich?
Mit aiw add @ai-website/comparison. Der Befehl legt die Datei components/ui/comparison.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, badge, icon, section und reveal. Weitere npm-Pakete braucht sie nicht.
Welche Varianten hat Vergleich?
5 Varianten, Wir gegen die anderen, Vorher und nachher, Optionskarten, Funktionsmatrix und Für und Wider. Du wählst sie mit der Prop variant, zum Beispiel variant="before-after".
Kann ich die Texte von Vergleich übersetzen?
Ja. Vergleich bringt 10 eigene Texte auf Deutsch und Englisch mit, etwa „Funktion“, „Vergleichen mit“ und „Enthalten“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.
Kann ein KI-Assistent Vergleich einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Vergleich mit aiw_components und installieren sie mit aiw_add @ai-website/comparison. Nenn im Prompt die Variante, etwa variant="table", dann schreibt der Assistent deine Inhalte direkt in die Props.
Kann ich Vergleich ohne Code anpassen?
Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Comparison-Code zum Kopieren.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus Content, demselben Bereich des Kits.
- ContactFormulare, Standorte, Öffnungszeiten und Booking.
- IntegrationsAnbindungen und Tools.
- ProcessSteps, Timelines und so funktioniert es.
- Error Pages404, 500, Wartung und Coming Soon.
- Alles aus ContentSections, die erzählen und fragen. Blog, Long Reads, Team, About, Docs, Rechtstexte, Kontakt und Formulare.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Comparison stehen.
Quellcode lädt