Skip to content
Aback UI

Block ยท Marketing

Pricing

Plan cards with a monthly or yearly switch, Intl prices, included and excluded features, and aligned actions.

Beta4 componentsRegistry JSON (opens in a new tab)
the Pricing preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add pricing

The block lands at components/blocks/pricing.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Prices are monthly amounts per period: { monthly: 29, yearly: 23 } shows $23 per month, billed yearly. 0 renders as Free.
  • Pass currency and locale so Intl formats the amount. Never concatenate a currency symbol.
  • Keep yearlyLabel truthful. If you say "save 20%", make the yearly prices 20% lower.
  • Use footnote for tax, trial, and refund terms that belong next to the prices.

Accessibility

  • The billing switch is a labelled toggle group with a single selection.
  • Each plan is a list item with an h3. Excluded features say "Not included" to screen readers, not only a dash.
  • Every call to action names its plan, so a list of links reads "Choose Growth, Growth plan" rather than three identical labels.
  • The highlighted plan is marked by the badge text as well as the border.