Pricing

Plan tiers side by side, with an optional monthly / annual switch.

Last updated

Uses JavaScript

With layout="tiers-toggle" a small island listens to the billing switch and swaps the visible price in each tier; it dispatches apogee:pricing-change (detail: { period }).

Without JS: The switch is hidden and the monthly prices show.

Pricing

Simple pricing

Three plans, no surprises.

Starter

For side projects.

$0/ month

  • All components
  • Community support
  • MIT licence
Start free
Popular

Pro

For teams shipping sites.

$12/ month

  • Everything in Starter
  • Sections and blocks
  • Priority support
  • Private registry
Start trial

Agency

For many clients.

$49/ month

  • Everything in Pro
  • Unlimited brands
  • Onboarding call
  • Invoicing
Talk to sales
Show code
<Pricing heading="Simple pricing" layout="tiers-toggle" items={[{ name, price, annualPrice, period, description, features, action, featured? }, …]} />

Add

npx @ava-ui/apogee add pricing

API

Prop Type Default Category Description
eyebrow, heading, description string — content Optional header.
items { name, price, annualPrice?, period?, annualPeriod?, description, features: string[], action: { label, href }, featured?, badge? }[] — content Required. annualPeriod replaces period while Annual is picked (“year” next to a yearly price). featured gets the primary border, button and a “Popular” badge (badge overrides the text).
periods { monthly, annual } Monthly / Annual content Labels on the switch.
label string English content Landmark name when there is no heading.
periodLabel string 'Billing period' content Name of the billing switch.
layout 'tiers' | 'tiers-toggle' 'tiers' layout
align 'start' | 'center' 'center' layout
background, spacing, headingLevel, id layout As on every section.

Layouts

Without the switch

Starter

For side projects.

$0/ month

  • All components
  • Community support
  • MIT licence
Start free
Popular

Pro

For teams shipping sites.

$12/ month

  • Everything in Starter
  • Sections and blocks
  • Priority support
  • Private registry
Start trial

Agency

For many clients.

$49/ month

  • Everything in Pro
  • Unlimited brands
  • Onboarding call
  • Invoicing
Talk to sales

On the inverted surface

Starter

For side projects.

$0/ month

  • All components
  • Community support
  • MIT licence
Start free
Popular

Pro

For teams shipping sites.

$12/ month

  • Everything in Starter
  • Sections and blocks
  • Priority support
  • Private registry
Start trial

Agency

For many clients.

$49/ month

  • Everything in Pro
  • Unlimited brands
  • Onboarding call
  • Invoicing
Talk to sales
Show code
<Pricing layout="tiers" items={…} />
<Pricing background="inverted" items={…} />

Accessibility

  • The switch is a native radio group labelled “Billing period”; prices use tabular figures; each plan’s name is a heading one level below the section heading.