@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.

35 components react shadcn-cli GPL-3.0

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://billingsdk.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://billingsdk.com/r/registry.json

bun bunx shadcn@latest add https://billingsdk.com/r/registry.json

fetch registry curl -s https://billingsdk.com/r/registry.json

Components

35 total

BillingSDK Config lib

Config for BillingSDK components

npx shadcn@latest add https://billingsdk.com/r/index.json

All Components block

All components in the BillingSDK

npx shadcn@latest add https://billingsdk.com/r/all.json

Hello World Component block

A simple hello world component

npx shadcn@latest add https://billingsdk.com/r/hello-world.json

Invoice History block

A read-only invoice history table

npx shadcn@latest add https://billingsdk.com/r/invoice-history.json

Pricing Table One block

A pricing table component

npx shadcn@latest add https://billingsdk.com/r/pricing-table-one.json

Pricing Table Two block

A pricing table component with a feature table

npx shadcn@latest add https://billingsdk.com/r/pricing-table-two.json

Pricing Table Three block

A pricing table component with a feature table

npx shadcn@latest add https://billingsdk.com/r/pricing-table-three.json

Pricing Table Four block

A modern pricing table component with gradient design

npx shadcn@latest add https://billingsdk.com/r/pricing-table-four.json

Pricing Table Five 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 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 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 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 block

A cancel subscription dialog component

npx shadcn@latest add https://billingsdk.com/r/cancel-subscription-dialog.json

Cancel Subscription Card block

A cancel subscription card component

npx shadcn@latest add https://billingsdk.com/r/cancel-subscription-card.json

Usage Based Pricing block

A usage based pricing component

npx shadcn@latest add https://billingsdk.com/r/usage-based-pricing.json

Update Plan Dialog block

A update plan dialog component

npx shadcn@latest add https://billingsdk.com/r/update-plan-dialog.json

Update Plan Card block

A update plan card component

npx shadcn@latest add https://billingsdk.com/r/update-plan-card.json

Subscription Management block

A subscription management component

npx shadcn@latest add https://billingsdk.com/r/subscription-management.json

Usage Meter Linear block

A usage meter linear component

npx shadcn@latest add https://billingsdk.com/r/usage-meter-linear.json

Usage Meter Circle block

A usage meter circle component

npx shadcn@latest add https://billingsdk.com/r/usage-meter-circle.json

Top Banner block

A banner component

npx shadcn@latest add https://billingsdk.com/r/banner.json

Payment Method Selector 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 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 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 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 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 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 block

A detailed usage table component with resource consumption breakdown

npx shadcn@latest add https://billingsdk.com/r/detailed-usage-table.json

Usage Table block

A usage table component with resource consumption breakdown

npx shadcn@latest add https://billingsdk.com/r/usage-table.json

Upcoming Charges 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 block

A payment card component

npx shadcn@latest add https://billingsdk.com/r/payment-card.json

Limited Offer Dialog 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 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 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 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