Components / Blocks / BillingSubscriptionSettings

BillingSubscriptionSettings.

ProBlockBillingv0.1.0

A provider-neutral billing view for plan state, usage limits, portal actions and invoice history. It displays billing state your app owns and emits actions; it never imports Stripe or another provider.

Get Elements Pro

Demo dataResponsive

ActiveRenews September 1

Micropreneur Pro

$29 / month

Unlimited registry records
CSV export
Priority support

Plan usage

Current billing-period consumption.

Registry records248 / 1,000

Exports7 / 25 runs

Invoice history

Receipts and payment status for this subscription.

August 1, 2026

INV-1042

paid$29.00

July 1, 2026

INV-1031

paid$29.00

Installation

Add the licensed registry once. Keep your license key in the project’s uncommitted environment.

components.json

{
  "registries": {
    "@elements-pro": {
      "headers": {
        "Authorization": "Bearer ${ELEMENTS_PRO_LICENSE_KEY}"
      },
      "url": "https://pro.elements.micropreneur.dev/r/{name}.json"
    }
  }
}

export ELEMENTS_PRO_LICENSE_KEY=mpro_...

pnpm dlx shadcn@latest add @elements-pro/billing-subscription-settings

The shadcn CLI writes the source into your project. Files added:

components/elements-pro/billing-subscription-settings.tsxblock
components/ui/button.tsxui
components/ui/badge.tsxui
components/ui/card.tsxui

Dependencies@base-ui/reactclass-variance-authorityclsxlucide-reacttailwind-merge

API

Prop	Type	Default	Description
planName (required)	string	—	Current plan title.
price (required)	string	—	Formatted price, e.g. "$29".
cadence (required)	string	—	Billing period label, e.g. "month".
renewsOn (required)	string	—	Formatted renewal date.
features (required)	string[]	—	Included features, shown with checks.
usage (required)	BillingUsage[]	—	One meter per limit.
invoices (required)	BillingInvoice[]	—	Receipts and payment status.
onManagePlan	() => void	—	Called by Change plan.
onOpenPortal	() => void	—	Called by Billing portal.

BillingUsage

Prop	Type	Default
label (required)	string	—
used (required)	number	—
limit (required)	number	—
unit	string	—

BillingInvoice

Prop	Type	Default
id (required)	string	—
date (required)	string	—
amount (required)	string	—
status (required)	'paid' \| 'open' \| 'failed'	—
downloadUrl	string	—

Accessibility

Each usage meter is a progressbar labelled like "Exports: 28% used".
Plan, usage and invoice cards are regions labelled by their titles.
Invoice download buttons are labelled with the invoice ID.