Offer

One offer with its value made plain. A receipt of everything inside, bonuses that unlock while scrolling, the price next to the usual ways, an extra to add at checkout and payment in instalments.

5 variants

Switch category

Value stack

A receipt of everything inside with its single value. The total gets crossed out as it scrolls in, then the price counts down to what you pay today.

Open in Studio

Installv1.0.0

aiw add @ai-website/offer-stack

Brings along utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<OfferStack variant="value-stack" title="…" name="…" price={249} items={[{ title, text, value, icon }]} guarantee="…" cta={{ label, href }} />

Source

Bonuses

The core offer stays on the left. Bonus cards on the right unlock one after another while scrolling, the lock turns into a gift and the border lights up.

Open in Studio

Installv1.0.0

aiw add @ai-website/offer-stack

Brings along utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<OfferStack variant="bonuses" title="…" name="…" price={249} items={[…]} bonuses={[{ title, text, value, icon }]} />

Source

Price anchor

The usual ways to the same result as bars, from agency to freelancer. The bars grow one after another, the offer comes last with the shortest bar.

Open in Studio

Installv1.0.0

aiw add @ai-website/offer-stack

Brings along utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<OfferStack variant="price-anchor" title="…" name="…" price={249} anchors={[{ label, price, note }]} />

Source

Order extra

What is inside on the left, the order on the right with one extra to tick in a dashed box. Ticking it moves the total to its new figure.

Open in Studio

Installv1.0.0

aiw add @ai-website/offer-stack

Brings along utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<OfferStack variant="order-bump" title="…" name="…" price={249} items={[…]} bump={{ title, text, price, was }} />

Source

Payment plan

Pay once or in instalments with a gliding switch. The amount, the schedule of payments and the button change together.

Open in Studio

Installv1.0.0

aiw add @ai-website/offer-stack

Brings along utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<OfferStack variant="payment-plan" title="…" name="…" price={249} plan={{ count: 3, amount: 89, dates: ["In one month", "In two months"] }} />

Source

Details

What Offer stack brings along, read from the registry and the source.

Area: Marketing
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/offer-stack.tsx
Brings along: utilskitbutton iconmotionrevealsectionnumber-ticker
npm packages: None
Languages: English and German, 21 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The OfferStackProps interface from components/ui/offer-stack.tsx, with the comments from the code.

variantoptional
OfferStackVariant
value-stackbonusesprice-anchororder-bumppayment-plan
eyebrowoptional
React.ReactNode
titlerequired
React.ReactNode
descriptionoptional
React.ReactNode
namerequired
string
The name of the offer, e.g. Website course
pricerequired
number
The price today
itemsoptional
OfferItem[]
value-stack, bonuses, order-bump: what is in it
bonusesoptional
OfferItem[]
bonuses: extras on top
anchorsoptional
{ label: string; price: number; note?: string }[]
price-anchor: other ways to the same result
bumpoptional
{ title: string; text: string; price: number; was?: number }
order-bump: the one extra to add
planoptional
{ count: number; amount: number; /** Labels of the later payments, e.g. In one month */ dates?: string[] }
payment-plan: the instalment option
guaranteeoptional
string
Short promise under the action, e.g. 30 days money back
currencyoptional
string
ctaoptional
{ label: string; href: string }

Built-in texts

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

Show all 21 texts

Key	English	German
value	English Value	German Wert
total	English Total value	German Gesamtwert
today	English Your price today	German Dein Preis heute
youSave	English You save {a}	German Du sparst {a}
bonus	English Bonus {n}	German Bonus {n}
worth	English worth {a}	German im Wert von {a}
free	English Free	German Gratis
core	English The course	German Der Kurs
order	English Your order	German Deine Bestellung
add	English Yes, add {t} for {a}	German Ja, {t} für {a} dazunehmen
sum	English Total	German Gesamt
once	English Pay once	German Einmal zahlen
split	English {n} payments	German {n} Raten
payment	English Payment	German Zahlung
instalment	English Payment {n}	German {n}. Rate
now	English Today	German Heute
payNow	English Pay {a} now	German Jetzt {a} zahlen
payFirst	English Pay {a} now, then {n} more	German Jetzt {a}, dann {n} weitere
sameTotal	English Same total, no interest	German Gleicher Gesamtbetrag, ohne Zinsen
saveOnce	English Save {a} when you pay at once	German Spare {a} bei Einmalzahlung
savedOnce	English {a} less than in instalments	German {a} weniger als in Raten

Read from the source of the component.

Offer stack handles the keys Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-label and aria-live, so screen readers announce purpose and state.
Uses the roles radio and radiogroup.
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 Offer stack?

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

Which variants does Offer stack have?

5 variants, Value stack, Bonuses, Price anchor, Order extra and Payment plan. You pick one with the variant prop, for example variant="bonuses".

Can I translate the texts of Offer stack?

Yes. Offer stack carries 21 texts of its own in English and German, such as “Value”, “Total value” and “Your price today”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Offer stack?

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

Can I adjust Offer stack without code?

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

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Offer on a page.

Offer stack

Value stack

Bonuses

Price anchor

Order extra

Payment plan

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with