What's in the billing family?

Pricing tables, plan cards, subscription and wallet cards, credit badges, and transaction lists — the surfaces that show cost, usage, and renewal state.

Do these components handle payments?

No. These are presentational React components — wire them to Stripe, Polar, or your own billing API. They render state; they don't process payments.

VLLNT UI · Component family

Billing components

Billing components render the money side of a product — pricing tables, plan and subscription cards, credit badges, wallets, and transaction history. Drop them in and connect your billing provider; they present cost, usage, and renewal state without prescribing a backend.

Browse all components How agents consume the registry3 components

Billing & Payments

Pricing tables, auto-reload controls, and transaction history for subscription billing, credits, and payment management.

Auto Reload

Toggle + collapsible threshold/amount form for automatic credit reloading with locale-aware currency. Install Auto Reload from the VLLNT UI registry with the shadcn CLI.

Web

5 stories

Pricing Table

Plan comparison with feature checklist, tier highlighting, CTA, and an optional monthly/annual toggle. Install Pricing Table from the VLLNT UI registry with the shadcn CLI.

Web

3 stories

Transaction List

Chronological credit/debit history with locale-aware currency formatting and a pinned subscription row. Install Transaction List from the VLLNT UI registry with the shadcn CLI.

Web

4 stories

Readable by agents

Your AI agent can install these too.

The registry is exposed as structured data, so coding agents pick the right component without scraping HTML.

/llms.txt

Concise index per the llmstxt.org spec — sections, links, and descriptions.

/llms-full.txt

Full registry context in one fetch — docs plus every component descriptor.

/r/<name>.json

Per-component descriptor: props, accessibility schema, and usage examples.

Frequently asked

What's in the billing family?: Pricing tables, plan cards, subscription and wallet cards, credit badges, and transaction lists — the surfaces that show cost, usage, and renewal state.
Do these components handle payments?: No. These are presentational React components — wire them to Stripe, Polar, or your own billing API. They render state; they don't process payments.