Bundles and subscriptions

Bundles with set discounts and volume prices, and subscriptions with plans, a box builder and a delivery schedule to skip or pause.

2 components · 9 variants

Switch category

subscription-box

Subscriptions

Selling something that comes again. One-time or subscribe on the product page, box sizes as plans, a three step builder, the schedule of the next deliveries and how a subscription works.

Subscribe and save
Box plans
Box builder
Delivery schedule
How it works

Props and details

Subscribe and save

One-time or subscribe on the product page. The subscribe option opens with a soft height and shows the rhythm with a sliding thumb and the perks, the price counts to the subscriber price and the button names the rhythm.

Open in Studio

Installv1.0.0

aiw add @ai-website/subscription-box

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<SubscriptionBox variant="purchase-toggle" product={{ name, subtitle, price, image }} discount={10} rhythms={[2, 4, 6]} perks={[…]} />

Source

Box plans

Box sizes as plans with price per delivery and per piece. Monthly or yearly with a sliding pill, prices count to the new value, the plan people choose most has a lit border and every card lifts on hover.

Open in Studio

Installv1.0.0

aiw add @ai-website/subscription-box

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<SubscriptionBox variant="plans" plans={[{ id, name, amount, price, pieces, perks, tag }]} yearly={15} />

Source

Box builder

Three steps with a bar that fills, for which coffee, how much and how often. Each step slides in from its side, the picked tile pops a check, and the summary beside it follows every choice and counts the price.

Open in Studio

Installv1.0.0

aiw add @ai-website/subscription-box

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<SubscriptionBox variant="builder" choices={[{ id, label, note, image }]} sizes={[{ id, label, note, price }]} rhythms={[2, 4]} discount={10} />

Source

Delivery schedule

The next deliveries on a timeline that fills while scrolling. Planned boxes can be skipped (struck through, with undo) or moved a week, the next one is marked, and pausing dims the plan and says so.

Open in Studio

Installv1.0.0

aiw add @ai-website/subscription-box

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<SubscriptionBox variant="schedule" deliveries={[{ id, date, items, status: "next" }]} />

Source

How it works

How a subscription works in four steps. The steps rise one after another, a line joins them and fills while scrolling, across on desktop and as a list on phones and tablets.

Open in Studio

Installv1.0.0

aiw add @ai-website/subscription-box

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<SubscriptionBox variant="how-it-works" steps={[{ icon, title, text }]} />

Source

bundles

Bundles

Selling several things together. Frequently bought together with one total, a set to build with tiered discounts, ready-made sets and packs with a price per piece.

Frequently bought together
Build your set
Ready-made sets
Packs and volume prices

Props and details

Frequently bought together

The product and two add-ons with plus signs between them. Ticking off fades a tile and its plus, the total counts to its new value, the discount for all three fades in and the button says how many go into the cart.

Open in Studio

Installv1.0.0

aiw add @ai-website/bundles

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<Bundles variant="frequently-bought" items={[product, addOn, addOn]} discount={10} onAdd={(items, total) => …} />

Source

Build your set

Empty slots on top fill with every pick, each piece pops in and leaves with a tap. A bar with tier marks fills toward the next discount and says how many are missing, the total counts along.

Open in Studio

Installv1.0.0

aiw add @ai-website/bundles

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<Bundles variant="build-a-set" items={items} slots={4} tiers={[{ count: 2, percent: 10 }, { count: 4, percent: 20 }]} />

Source

Ready-made sets

Curated sets as cards. The pieces stand side by side and fan out on hover, a sticker with the saving straightens up, chips list what is inside and the set price stands against the single prices.

Open in Studio

Installv1.0.0

aiw add @ai-website/bundles

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<Bundles variant="set-cards" sets={[{ id, name, description, items, price }]} />

Source

Packs and volume prices

One product in packs of 1, 3 and 6 as cards with the price per piece and the saving. The picture shows the picked pack as that many pieces that rise in one after another, the total counts to the new price.

Open in Studio

Installv1.0.0

aiw add @ai-website/bundles

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<Bundles variant="volume" product={{ id, name, price, unit, image }} packs={[{ id, count: 3, price: 40.2 }]} />

Source

Similar components

More from E-Commerce, the same area of the kit.

Often combined with

Sections that usually sit next to Bundles and subscriptions on a page.

Subscribe and save

Box plans

Box builder

Delivery schedule

How it works

Frequently bought together

Build your set

Ready-made sets

Packs and volume prices

Similar components, Often combined with

Similar components

Often combined with