Zum Inhalt springen
UI Kit
Accent

Einwände

Die Bedenken, die Menschen vor dem Kauf bremsen, beantwortet mit Belegen. Karten mit zählenden Zahlen, eine Auswahl für das eine Bedenken, eine Liste, die sich abhakt, vorher und nachher derselben Person und ruhige Zeilen.

5 Variants
Kategorie wechseln

Einwände

Belegkarten

Das Bedenken als Zitat, die Antwort als Überschrift und eine Zahl, die als Beleg hochzählt. Die Karten steigen nacheinander auf, Licht folgt dem Zeiger.

Im Studio öffnen

Bedenken wählen

Besucher wählen, was sie zurückhält, und bekommen eine passende Antwort mit Beleg. Die Auswahl folgt den Pfeiltasten, die Antwort steigt auf.

Im Studio öffnen

Abgehakt

Jedes Bedenken bekommt seinen Haken, wenn es die Bildschirmmitte erreicht, ein Ring zählt die beantworteten. Auf dem Telefon bleibt beim Lesen eine schmale Leiste oben.

Im Studio öffnen

Vorher und heute

Das Bedenken eines Kunden und was dieselbe Person Monate später sagt. Die Linie dazwischen zeichnet sich beim Hereinscrollen.

Im Studio öffnen

Zeilen

Bedenken, Antwort und Beleg in drei ruhigen Spalten, für lange Verkaufsseiten. Zeilen steigen auf, Zahlen zählen, eine verlinkte Zeile hellt beim Hover auf.

Im Studio öffnen

Details

Was Einwände mitbringt, aus Registry und Quellcode gelesen.

Bereich
Marketing
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/objections.tsx
Bringt mit
utilskitbuttoniconmotionrevealsectionnumber-ticker
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 9 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle ObjectionsProps aus components/ui/objections.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    ObjectionsVariant

    proof-cardsselectorchecklistthen-nowrows

  • eyebrowoptional
    React.ReactNode
  • titlePflicht
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • itemsPflicht
    ObjectionItem[]
  • questionoptional
    string

    selector: the question above the chips

  • ctaoptional
    { label: string; href: string }
  • noteoptional
    string

    A short promise under the action, e.g. cancel any month

Eingebaute Texte

Diese Texte schreibt Einwände selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 9 Texte anzeigen
questionEnglisch What is holding you back?Deutsch Was hält dich noch zurück?
answeredEnglisch {n} of {t} doubts answeredDeutsch {n} von {t} Bedenken beantwortet
answeredShortEnglisch {n} of {t}Deutsch {n} von {t}
answeredRestEnglisch doubts answeredDeutsch Bedenken beantwortet
thenEnglisch BeforeDeutsch Vorher
nowEnglisch TodayDeutsch Heute
doubtEnglisch DoubtDeutsch Bedenken
answerEnglisch AnswerDeutsch Antwort
proofEnglisch ProofDeutsch Beleg

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Einwände reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-controls, aria-labelledby und aria-live, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen radio und radiogroup.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • 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).
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 10 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Einwände?

Mit aiw add @ai-website/objections. Der Befehl legt die Datei components/ui/objections.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, motion, reveal, section und number-ticker. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Einwände?

5 Varianten, Belegkarten, Bedenken wählen, Abgehakt, Vorher und heute und Zeilen. Du wählst sie mit der Prop variant, zum Beispiel variant="selector".

Kann ich die Texte von Einwände übersetzen?

Ja. Einwände bringt 9 eigene Texte auf Deutsch und Englisch mit, etwa „Was hält dich noch zurück?“, „Bedenken beantwortet“ und „Vorher“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Einwände einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Einwände mit aiw_components und installieren sie mit aiw_add @ai-website/objections. Nenn im Prompt die Variante, etwa variant="proof-cards", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Einwände ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Objections-Code zum Kopieren.

Ähnliche Components

Mehr aus Marketing, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Einwände stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert