How do I calculate the yearly discount?

Set yearlyPrice on each plan to your actual annual price. The card shows the monthly-equivalent (yearlyPrice divided by 12) plus the full annual total underneath.

Can I show only two plans instead of three?

Yes, pass a two-item plans array. The grid switches to two columns automatically.

How do I make the Continue button actually submit the selection?

Read the selected plan id from your own state, or lift the selection into a parent component and drive the plans and defaultPlanId props from there.

What does seatCount actually change?

It adds a per-seat total line under the price, the displayed price times the seat count. Omit it if you're not billing per seat.

Is the monthly/yearly toggle accessible?

Yes, both toggle buttons use aria-pressed, and the plan cards use role=radiogroup with role=radio and aria-checked.

Why does only one plan show a badge?

Any plan can carry an optional badge string, such as "Best value". Leave it undefined on plans that shouldn't show one.

Billing Plan Selector

A compact plan selector with a monthly/yearly billing toggle and selectable plan cards. Prices recalculate for the chosen interval and, when a seat count is provided, each card also shows the per-seat total. Built as real buttons in a radio group so selection works with keyboard and screen readers, not just pointer clicks.

By Staaarter Team

Billing

Updated June 3, 2026

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-plan-selector.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing9.tsx instead.

Usage

The file also exports billing9Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing9, billing9Demo } from "@/components/blocks/billing/billing9";

export default function Page() {
  return <Billing9 {...billing9Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	none	Optional heading above the toggle.
description	string	none	Optional supporting text below the heading.
plans	PlanOption[]	none	Plans rendered as selectable cards. Two plans render in a 2-column grid, three in a 3-column grid.
defaultPlanId	string	plans[0].id	Which plan is selected on first render.
defaultInterval	"monthly" \| "yearly"	"monthly"	Which billing interval is active on first render.
seatCount	number	none	When set, shows a per-seat total (price times seatCount) under each plan's price.
ctaLabel	string	"Select plan"	Label shown on unselected plan cards; selected cards show "Selected" instead.
className	string	none	Extra classes for the outer wrapper.

Types

interface PlanOption {
  id: string;
  name: string;
  monthlyPrice: number;
  yearlyPrice: number;
  description?: string;
  features: string[];
  badge?: string;
}

Behavior notes

Billing interval and selected plan are both local state; switching to yearly recalculates each card's displayed price as yearlyPrice / 12.
When seatCount is set, each card also shows the per-seat price multiplied by the seat count.
Plan cards are real buttons in a radiogroup, so selection works with keyboard navigation and screen readers, not just pointer clicks.
The bottom Continue button label reflects whichever plan is currently selected.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.