Kostenlos testen

Einen Test starten, ohne offene Fragen. Das Formular mit den folgenden Schritten, die Testtage auf einer Spur, ein Plan mit dem Datum der ersten Abbuchung, drei Wege zum Start und ein Fenster, das den Teamnamen beim Tippen übernimmt.

5 Variants

Kategorie wechseln

Formular und Schritte

Die Anmeldung neben den drei folgenden Schritten. Eine Linie füllt sich beim Scrollen entlang der Schritte, das Formular prüft die Adresse und bestätigt an Ort und Stelle.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/free-trial

Bringt mit utils, kit, button, icon, input, frame, motion, reveal, section

Usage

<FreeTrial variant="steps-form" product="Relay" title="…" steps={[{ title, text, icon }]} points={[…]} action="/signup" />

Source

Testtage

Was an welchem Tag passiert, vom ersten Login bis zur Entscheidung. Die Spur füllt sich beim Scrollen, auf dem Telefon stehen die Tage auf einer senkrechten Schiene.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/free-trial

Bringt mit utils, kit, button, icon, input, frame, motion, reveal, section

Usage

<FreeTrial variant="timeline" product="Relay" title="…" days={14} milestones={[{ day, title, text, icon }]} />

Source

Plan zum Testen

Den Plan zum Testen wählen, die Übersicht nennt heute 0 und den Tag der ersten Abbuchung. Der Knopf übernimmt den Plannamen, die Übersicht bleibt stehen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/free-trial

Bringt mit utils, kit, button, icon, input, frame, motion, reveal, section

Usage

<FreeTrial variant="plan-picker" product="Relay" title="…" plans={[{ id, name, price, text, features, popular }]} />

Source

Wege zum Start

Test, kostenloser Plan oder geführte Demo als drei Karten. Die empfohlene trägt ein umlaufendes Licht, Karten heben sich beim Hover und steigen nacheinander auf.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/free-trial

Bringt mit utils, kit, button, icon, input, frame, motion, reveal, section

Usage

<FreeTrial variant="ways-to-start" product="Relay" title="…" ways={[{ title, text, icon, badge, points, cta, highlight }]} />

Source

Live-Vorschau

Während der Teamname getippt wird, übernimmt ihn das Produktfenster. Kürzel, Adresse und Begrüßung ändern sich sofort, Besucher sehen ihren Arbeitsbereich vor der Anmeldung.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/free-trial

Bringt mit utils, kit, button, icon, input, frame, motion, reveal, section

Usage

<FreeTrial variant="live-preview" product="Relay" domain="relay.app" title="…" points={[…]} />

Source

Details

Was Kostenlos testen mitbringt, aus Registry und Quellcode gelesen.

Bereich: Marketing
Variants: 5
Version: 1.0.0 · seit 1.1.0
Datei: components/ui/free-trial.tsx
Bringt mit: utilskitbutton icon inputframemotionrevealsection
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 30 eigene Texte
Studio: Alle 5 Variants bearbeitbar
In Sammlungen: SaaS-Landingpage
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle FreeTrialProps aus components/ui/free-trial.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
FreeTrialVariant
steps-formtimelineplan-pickerways-to-startlive-preview
eyebrowoptional
React.ReactNode
titlePflicht
React.ReactNode
descriptionoptional
React.ReactNode
daysoptional
number
Length of the trial in days, default 14
productPflicht
string
Product name, e.g. Relay
pointsoptional
string[]
Short promises next to the form, e.g. No card needed
stepsoptional
{ title: string; text: string; icon?: IconName }[]
steps-form: what happens after the sign-up
milestonesoptional
{ day: number; title: string; text: string; icon?: IconName }[]
timeline: the days of the trial
plansoptional
{ id: string; name: string; price: number; text?: string; features?: string[]; popular?: boolean }[]
plan-picker: plans to try, prices per month
waysoptional
{ title: string; text: string; icon?: IconName; badge?: string; points?: string[]; cta: { label: string; href: string }; highlight?: boolean }[]
ways-to-start: three ways in
domainoptional
string
live-preview: domain shown in the window, e.g. relay.app
currencyoptional
string
ISO currency, default EUR
actionoptional
string
Where the form posts
onStartoptional
(data: { email: string; team?: string; plan?: string }) => void

Eingebaute Texte

Diese Texte schreibt Kostenlos testen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 30 Texte anzeigen

Schlüssel	Englisch	Deutsch
email	Englisch Work email	Deutsch Geschäftliche E-Mail
emailPlaceholder	Englisch you@company.com	Deutsch du@firma.de
team	Englisch Team name	Deutsch Name des Teams
teamPlaceholder	Englisch Northwind Studio	Deutsch Studio Nordwind
start	Englisch Start {n}-day trial	Deutsch {n} Tage kostenlos testen
startPlan	Englisch Try {p} free for {n} days	Deutsch {p} {n} Tage kostenlos testen
invalid	Englisch Please enter an email address like name@company.com.	Deutsch Bitte gib eine E-Mail-Adresse wie name@firma.de ein.
sentTitle	Englisch Check your inbox	Deutsch Schau in dein Postfach
sentText	Englisch We sent a link to {e}. It opens your account and stays valid for 24 hours.	Deutsch Wir haben einen Link an {e} geschickt. Er öffnet dein Konto und gilt 24 Stunden.
again	Englisch Use another address	Deutsch Andere Adresse verwenden
day	Englisch Day {n}	Deutsch Tag {n}
today	Englisch Due today	Deutsch Heute fällig
then	Englisch From {d}	Deutsch Ab {d}
thenSoon	Englisch After {n} days	Deutsch Nach {n} Tagen
perMonth	Englisch {a} a month	Deutsch {a} im Monat
cancel	Englisch Cancel before {d} and you pay nothing.	Deutsch Kündige vor dem {d} und du zahlst nichts.
cancelSoon	Englisch Cancel within {n} days and you pay nothing.	Deutsch Kündige innerhalb von {n} Tagen und du zahlst nichts.
popular	Englisch Most chosen	Deutsch Am häufigsten gewählt
plan	Englisch Plan	Deutsch Plan
welcome	Englisch Welcome, {t}	Deutsch Willkommen, {t}
yourTeam	Englisch Your team	Deutsch Dein Team
preview	Englisch Preview of your workspace	Deutsch Vorschau deines Arbeitsbereichs
inbox	Englisch Inbox	Deutsch Posteingang
tasks	Englisch Tasks	Deutsch Aufgaben
reports	Englisch Reports	Deutsch Berichte
ready	Englisch Your workspace is ready	Deutsch Dein Arbeitsbereich ist bereit
firstSteps	Englisch First steps	Deutsch Erste Schritte
stepInvite	Englisch Invite your team	Deutsch Team einladen
stepConnect	Englisch Connect your email	Deutsch Postfach verbinden
stepReply	Englisch Send the first reply	Deutsch Erste Antwort senden

Aus dem Quellcode der Component abgeleitet.

Setzt aria-label, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen img, radiogroup und status.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
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).
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Kostenlos testen?

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

Welche Varianten hat Kostenlos testen?

5 Varianten, Formular und Schritte, Testtage, Plan zum Testen, Wege zum Start und Live-Vorschau. Du wählst sie mit der Prop variant, zum Beispiel variant="timeline".

Kann ich die Texte von Kostenlos testen übersetzen?

Ja. Kostenlos testen bringt 30 eigene Texte auf Deutsch und Englisch mit, etwa „Geschäftliche E-Mail“, „du@firma.de“ und „Name des Teams“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Kostenlos testen einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Kostenlos testen mit aiw_components und installieren sie mit aiw_add @ai-website/free-trial. Nenn im Prompt die Variante, etwa variant="steps-form", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Kostenlos testen ohne Code anpassen?

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

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Kostenlos testen stehen.