sh4dcn
Registries
ActiveE-commerce/paymentspro available483

@billingsdk

E-commerce/payments · GPL-3.0 · data updated 2026-07-28

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.

WebsiteDocsGitHubComponents folderProAgent brief (.md)
@billingsdk preview
accessibilityaestheticanimationaudiocardsdesign-systemformsoverlayspaymentspro-availablesaastables

Install

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

Health

StatusActive
Last commit1 month ago
LicenseGPL-3.0
Open issues15
ArchivedNo
Stars483

Components (35)

indexallhello-worldinvoice-historypricing-table-onepricing-table-twopricing-table-threepricing-table-fourpricing-table-fivepricing-table-sixpricing-table-sevenpricing-table-eightcancel-subscription-dialogcancel-subscription-cardusage-based-pricingupdate-plan-dialogupdate-plan-cardsubscription-managementusage-meter-linearusage-meter-circlebannerpayment-method-selectorpayment-detailspayment-details-twobilling-settingsbilling-settings-2proration-previewdetailed-usage-tableusage-tableupcoming-chargespayment-cardlimited-offer-dialogtrial-expiry-cardpayment-failurebilling-screen
Components: index, all, hello-world, invoice-history, pricing-table-one, pricing-table-two, pricing-table-three, pricing-table-four, pricing-table-five, pricing-table-six, pricing-table-seven, pricing-table-eight, cancel-subscription-dialog, cancel-subscription-card, usage-based-pricing, update-plan-dialog, update-plan-card, subscription-management, usage-meter-linear, usage-meter-circle, banner, payment-method-selector, payment-details, payment-details-two, billing-settings, billing-settings-2, proration-preview, detailed-usage-table, usage-table, upcoming-charges, payment-card, limited-offer-dialog, trial-expiry-card, payment-failure, billing-screen

Preview

Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.

@billingsdk · index

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