Free trial

Starting a trial with nothing left unclear. The form with the steps that follow, the trial days on a track, a plan with the date of the first charge, three ways to start and a window that takes the team name as it is typed.

5 variants

Switch category

Form and steps

The sign-up next to the three steps that follow. A line fills along the steps while scrolling, the form checks the address and confirms in place.

Open in Studio

Installv1.0.0

aiw add @ai-website/free-trial

Brings along 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

Trial days

What happens on which day, from the first login to the decision. The track fills while scrolling, on phones the days sit on a vertical rail.

Open in Studio

Installv1.0.0

aiw add @ai-website/free-trial

Brings along 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 to try

Pick the plan to try, the summary says 0 today and names the day of the first charge. The button takes the plan name, the summary stays in view.

Open in Studio

Installv1.0.0

aiw add @ai-website/free-trial

Brings along 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

Ways to start

Trial, free plan or a guided demo as three cards. The recommended one carries a running light, cards lift on hover and rise in one after another.

Open in Studio

Installv1.0.0

aiw add @ai-website/free-trial

Brings along 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 preview

While the team name is typed, the product window takes it over. Initials, address and greeting change at once, the visitor sees the own workspace before signing up.

Open in Studio

Installv1.0.0

aiw add @ai-website/free-trial

Brings along utils, kit, button, icon, input, frame, motion, reveal, section

Usage

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

Source

Details

What Free trial brings along, read from the registry and the source.

Area: Marketing
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/free-trial.tsx
Brings along: utilskitbutton icon inputframemotionrevealsection
npm packages: None
Languages: English and German, 30 texts of its own
Studio: All 5 variants editable
In collections: SaaS landing page
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The FreeTrialProps interface from components/ui/free-trial.tsx, with the comments from the code.

variantoptional
FreeTrialVariant
steps-formtimelineplan-pickerways-to-startlive-preview
eyebrowoptional
React.ReactNode
titlerequired
React.ReactNode
descriptionoptional
React.ReactNode
daysoptional
number
Length of the trial in days, default 14
productrequired
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

Built-in texts

Free trial writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 30 texts

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

Read from the source of the component.

Sets aria-label, so screen readers announce purpose and state.
Uses the roles img, radiogroup and status.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
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).
With reduced motion (prefers-reduced-motion) it stays still. 3 places in the code switch motion off then.

Frequent questions

How do I install Free trial?

With aiw add @ai-website/free-trial. The command puts components/ui/free-trial.tsx into your project, the code is yours from then on. It brings along button, icon, input, frame, motion, reveal and section. It needs no further npm packages.

Which variants does Free trial have?

5 variants, Form and steps, Trial days, Plan to try, Ways to start and Live preview. You pick one with the variant prop, for example variant="timeline".

Can I translate the texts of Free trial?

Yes. Free trial carries 30 texts of its own in English and German, such as “Work email”, “you@company.com” and “Team name”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Free trial?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Free trial with aiw_components and install it with aiw_add @ai-website/free-trial. Name the variant in your prompt, for example variant="steps-form", and the assistant writes your content straight into the props.

Can I adjust Free trial without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching FreeTrial code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Free trial on a page.

Free trial

Form and steps

Trial days

Plan to try

Ways to start

Live preview

Details

Props

Built-in texts

Accessibility

Motion

Part of these collections

Part of these collections

Frequent questions

Similar components, Often combined with

Similar components

Often combined with