Billing and usage

Plans, seats, payment methods, usage and limits.

2 components · 10 variants

Switch category

billing

Billing

Billing screens for apps. Change the plan with a prorated price, buy seats, manage payment methods, cancel with a fair offer and keep billing details.

Change plan
Seats
Payment methods
Cancel flow
Billing details

Props and details

Change plan

Plans as a radio group with monthly and yearly prices, a summary with gained and lost features, credit for unused days and the amount due today.

Open in Studio

Installv1.0.1

aiw add @ai-website/billing

Brings along utils, kit, button, icon, input, select, dialog, sidebar

Usage

<Billing variant="change-plan" title="Plan" plans={[{ id, name, monthly, yearly, features }]} current={{ plan, cycle, periodStart, periodEnd }} />

Source

Seats

A stepper with one square per seat, the new total, the prorated charge or credit and a hint when seats are still in use.

Open in Studio

Installv1.0.1

aiw add @ai-website/billing

Brings along utils, kit, button, icon, input, select, dialog, sidebar

Usage

<Billing variant="seats" title="Seats" seats={{ purchased, used, price, periodEnd }} />

Source

Payment methods

Cards and direct debit with a default, removal with a check, and a form with a drawn card that turns over for the security code.

Open in Studio

Installv1.0.1

aiw add @ai-website/billing

Brings along utils, kit, button, icon, input, select, dialog, sidebar

Usage

<Billing variant="payment-methods" title="Payment" methods={[{ id, kind, holder, last4, expires, default }]} />

Source

Cancel flow

Three steps with a reason, an offer that fits the reason and a clear confirmation of what stays and what ends.

Open in Studio

Installv1.0.1

aiw add @ai-website/billing

Brings along utils, kit, button, icon, input, select, dialog, sidebar

Usage

<Billing variant="cancel-flow" title="Cancel" cancel={{ plan, price, endsOn, reasons, offer, keep, lose }} />

Source

Billing details

Address, VAT ID with a country check and invoice recipients as chips, with an invoice preview that follows the typing and a save bar.

Open in Studio

Installv1.0.1

aiw add @ai-website/billing

Brings along utils, kit, button, icon, input, select, dialog, sidebar

Usage

<Billing variant="billing-details" title="Billing details" details={{ company, street, postalCode, city, country, vatId, emails }} countries={[…]} />

Source

usage

Usage and limits

Usage screens. Quota meters with a forecast, a daily chart with the projected rest of the period, a monthly budget with alerts, a breakdown and prepaid credits.

Quota meters
Daily usage
Spend limits
Usage breakdown
Prepaid credits

Props and details

Quota meters

Each quota with used and left, a dashed forecast for the period, a state near the limit and the day the limit is reached at this pace.

Open in Studio

Installv1.0.0

aiw add @ai-website/usage

Brings along utils, kit, button, icon, select, switch, sidebar

Usage

<Usage variant="quotas" title="Usage" quotas={[{ id, label, used, limit, unit, icon }]} period={{ start, end }} />

Source

Daily usage

Bars per day with the rest of the period projected in outline, the daily share of the limit as a line and a note on the day the limit is reached.

Open in Studio

Installv1.0.0

aiw add @ai-website/usage

Brings along utils, kit, button, icon, select, switch, sidebar

Usage

<Usage variant="daily-chart" title="Usage" series={[{ id, label, unit, limit, days }]} period={{ start, end }} />

Source

Spend limits

A half ring with the spend against the budget, a slider for the budget, email alerts at 50, 80 and 100% and a switch to pause at the budget.

Open in Studio

Installv1.0.0

aiw add @ai-website/usage

Brings along utils, kit, button, icon, select, switch, sidebar

Usage

<Usage variant="spend-limits" title="Budget" spend={{ current, cap, max, alerts, hardStop }} />

Source

Usage breakdown

A stacked bar of every project and a sortable list with shares, switching the metric reorders the rows with a glide.

Open in Studio

Installv1.0.0

aiw add @ai-website/usage

Brings along utils, kit, button, icon, select, switch, sidebar

Usage

<Usage variant="breakdown" title="Breakdown" metrics={[{ id, label, unit }]} items={[{ id, label, meta, values }]} />

Source

Prepaid credits

The balance with how long it lasts, credit packs to buy, automatic top-up below a mark and the activity.

Open in Studio

Installv1.0.0

aiw add @ai-website/usage

Brings along utils, kit, button, icon, select, switch, sidebar

Usage

<Usage variant="credits" title="Credits" credits={{ balance, perDay, packs, history, autoTopUp }} />

Source

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to Billing and usage on a page.

Change plan

Seats

Payment methods

Cancel flow

Billing details

Quota meters

Daily usage

Spend limits

Usage breakdown

Prepaid credits

Similar components, Often combined with

Similar components

Often combined with