---
name: "@billingsdk"
slug: "billingsdk"
description: "Open-source, TypeScript-first React component library for SaaS billing flows. Contains 30+ components including eight pricing-table variants, subscription management, usage meters (linear and circular), banner notifications, plan upgrade/downgrade cards, cancellation flows, invoice history, payment-method selector, payment success/failure dialogs, and trial-expiry cards. Built with Tailwind CSS v4, Motion animations, and shadcn/ui; supports Dodo Payments and Stripe. Part of the Vercel OSS Program. Use for: wiring up an end-to-end billing and subscription UI without designing payment flows from scratch."
category: "E-commerce/payments"
tags: ["accessibility", "aesthetic", "animation", "audio", "cards", "design-system", "forms", "overlays", "payments", "pro-available", "saas", "tables"]
framework: "react"
license: "GPL-3.0"
author: "dodopayments"
website: "https://billingsdk.com"
github: "https://github.com/dodopayments/billingsdk"
registry: "https://billingsdk.com/r/registry.json"
pro: true
pro_url: "https://billingsdk.com/docs/components/pricing-table/pricing-table-one"
github_stars: 483
component_count: 35
generated_at: "2026-07-28T08:59:05.895Z"
---

# @billingsdk

Open-source, TypeScript-first React component library for SaaS billing flows. Contains 30+ components including eight pricing-table variants, subscription management, usage meters (linear and circular), banner notifications, plan upgrade/downgrade cards, cancellation flows, invoice history, payment-method selector, payment success/failure dialogs, and trial-expiry cards. Built with Tailwind CSS v4, Motion animations, and shadcn/ui; supports Dodo Payments and Stripe. Part of the Vercel OSS Program. Use for: wiring up an end-to-end billing and subscription UI without designing payment flows from scratch.

## Links

- Website: https://billingsdk.com
- GitHub: https://github.com/dodopayments/billingsdk
- Registry JSON: https://billingsdk.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/billingsdk
- This file: https://sh4dcn.vercel.app/md/billingsdk.md
- Pro / pricing: https://billingsdk.com/docs/components/pricing-table/pricing-table-one

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://billingsdk.com/r/registry.json
pnpm dlx shadcn@latest add https://billingsdk.com/r/registry.json
bunx shadcn@latest add https://billingsdk.com/r/registry.json
# clone the source repo
git clone https://github.com/dodopayments/billingsdk.git
# fetch the raw registry index
curl -s https://billingsdk.com/r/registry.json
```

## Components (35)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:lib | Config for BillingSDK components | `npx shadcn@latest add https://billingsdk.com/r/index.json` |
| all | registry:block | All components in the BillingSDK | `npx shadcn@latest add https://billingsdk.com/r/all.json` |
| hello-world | registry:block | A simple hello world component | `npx shadcn@latest add https://billingsdk.com/r/hello-world.json` |
| invoice-history | registry:block | A read-only invoice history table | `npx shadcn@latest add https://billingsdk.com/r/invoice-history.json` |
| pricing-table-one | registry:block | A pricing table component | `npx shadcn@latest add https://billingsdk.com/r/pricing-table-one.json` |
| pricing-table-two | registry:block | A pricing table component with a feature table | `npx shadcn@latest add https://billingsdk.com/r/pricing-table-two.json` |
| pricing-table-three | registry:block | A pricing table component with a feature table | `npx shadcn@latest add https://billingsdk.com/r/pricing-table-three.json` |
| pricing-table-four | registry:block | A modern pricing table component with gradient design | `npx shadcn@latest add https://billingsdk.com/r/pricing-table-four.json` |
| pricing-table-five | registry:block | A modern pricing table component with contact us plan | `npx shadcn@latest add https://billingsdk.com/r/pricing-table-five.json` |
| pricing-table-six | registry:block | A modern pricing table component with contact us plan | `npx shadcn@latest add https://billingsdk.com/r/pricing-table-six.json` |
| pricing-table-seven | registry:block | A modern pricing table component with contact us plan | `npx shadcn@latest add https://billingsdk.com/r/pricing-table-seven.json` |
| pricing-table-eight | registry:block | A modern pricing table component with a clean design. | `npx shadcn@latest add https://billingsdk.com/r/pricing-table-eight.json` |
| cancel-subscription-dialog | registry:block | A cancel subscription dialog component | `npx shadcn@latest add https://billingsdk.com/r/cancel-subscription-dialog.json` |
| cancel-subscription-card | registry:block | A cancel subscription card component | `npx shadcn@latest add https://billingsdk.com/r/cancel-subscription-card.json` |
| usage-based-pricing | registry:block | A usage based pricing component | `npx shadcn@latest add https://billingsdk.com/r/usage-based-pricing.json` |
| update-plan-dialog | registry:block | A update plan dialog component | `npx shadcn@latest add https://billingsdk.com/r/update-plan-dialog.json` |
| update-plan-card | registry:block | A update plan card component | `npx shadcn@latest add https://billingsdk.com/r/update-plan-card.json` |
| subscription-management | registry:block | A subscription management component | `npx shadcn@latest add https://billingsdk.com/r/subscription-management.json` |
| usage-meter-linear | registry:block | A usage meter linear component | `npx shadcn@latest add https://billingsdk.com/r/usage-meter-linear.json` |
| usage-meter-circle | registry:block | A usage meter circle component | `npx shadcn@latest add https://billingsdk.com/r/usage-meter-circle.json` |
| banner | registry:block | A banner component | `npx shadcn@latest add https://billingsdk.com/r/banner.json` |
| payment-method-selector | registry:block | A payment method selector component with support for cards, digital wallets, UPI, and BNPL services | `npx shadcn@latest add https://billingsdk.com/r/payment-method-selector.json` |
| payment-details | registry:block | A comprehensive payment details form component with card details, billing information, and country selection | `npx shadcn@latest add https://billingsdk.com/r/payment-details.json` |
| payment-details-two | registry:block | A comprehensive payment details form component with card details, billing information, and country selection built using React Hook Form and custom validation | `npx shadcn@latest add https://billingsdk.com/r/payment-details-two.json` |
| billing-settings | registry:block | A comprehensive billing settings component with tabs for general, payment methods, invoices, and usage limits | `npx shadcn@latest add https://billingsdk.com/r/billing-settings.json` |
| billing-settings-2 | registry:block | A comprehensive billing settings component with tabs for general, payment methods, invoices, and usage limits | `npx shadcn@latest add https://billingsdk.com/r/billing-settings-2.json` |
| proration-preview | registry:block | Interactive component that shows billing adjustments when users change subscription plans, featuring cost breakdowns, credits, and prorated charges | `npx shadcn@latest add https://billingsdk.com/r/proration-preview.json` |
| detailed-usage-table | registry:block | A detailed usage table component with resource consumption breakdown | `npx shadcn@latest add https://billingsdk.com/r/detailed-usage-table.json` |
| usage-table | registry:block | A usage table component with resource consumption breakdown | `npx shadcn@latest add https://billingsdk.com/r/usage-table.json` |
| upcoming-charges | registry:block | A component that displays information about upcoming billing cycles, including the next billing date, total amount, and a breakdown of individual charges | `npx shadcn@latest add https://billingsdk.com/r/upcoming-charges.json` |
| payment-card | registry:block | A payment card component | `npx shadcn@latest add https://billingsdk.com/r/payment-card.json` |
| limited-offer-dialog | registry:block | A dialog component for displaying limited-time offers with customizable content and actions | `npx shadcn@latest add https://billingsdk.com/r/limited-offer-dialog.json` |
| trial-expiry-card | registry:block | A card component that displays trial expiration countdown with progress indicator and feature list | `npx shadcn@latest add https://billingsdk.com/r/trial-expiry-card.json` |
| payment-failure | registry:block | A payment failure card component with retry, home, and support actions. | `npx shadcn@latest add https://billingsdk.com/r/payment-failure.json` |
| billing-screen | registry:block | Complete billing dashboard with credit balance, plan details, and interactive credit card visual | `npx shadcn@latest add https://billingsdk.com/r/billing-screen.json` |

## For AI agents

```text
You are adding components from @billingsdk to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/billingsdk.md) for the component list.
2. Fetch the machine-readable index: https://billingsdk.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: billingsdk).
```