Billing

Billing Overview

Displays the user's current subscription plan, usage metrics with progress bars, and billing actions. Upgrade and manage billing callbacks are passed in.

Current plan

Pro

$29 / month

Unlimited projects
10 team members
Priority support

Usage

Projects6 / 10

Team members3 / 10

API calls8,200 calls / 10,000 calls

Next billing date: May 15, 2026

import { BillingOverview } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add billing-overview

Import

import.tsx

import { BillingOverview } from "@aetherstack/blocks"

Usage

billing-overview.tsx

import { BillingOverview } from "@aetherstack/blocks"

export default function BillingPage() {
  return (
    <BillingOverview
      plan={{
        name: "Pro",
        price: "$29",
        period: "month",
        features: ["Unlimited projects", "10 team members", "Priority support"],
      }}
      usage={[
        { label: "Projects", used: 6, limit: 10 },
        { label: "Team members", used: 3, limit: 10 },
        { label: "API calls", used: 8200, limit: 10000, unit: "calls" },
      ]}
      nextBillingDate="May 15, 2026"
      onUpgrade={() => router.push("/upgrade")}
      onManageBilling={() => window.open(portalUrl)}
    />
  )
}

Props

Prop	Type	Default	Description
plan	BillingPlan	—	Current plan details: name, price, period, features.
usage	UsageMetric[]	—	Array of usage metrics, each with label, used, limit, and optional unit.
nextBillingDate	string	—	Human-readable next billing date string.
onUpgrade	() => void	—	Called when the upgrade button is clicked.
onManageBilling	() => void	—	Called when the manage billing button is clicked.
className	string	—	Additional classes on the wrapper.

* Required

Accessibility

→Progress bars use semantic <progress> element via the Progress primitive with accessible labels.
→Plan features list is rendered as a <ul> for correct screen-reader semantics.