Billingsdk

Overview

Billing SDK is an open-source library of billing and subscription management components for React from Dodo Payments, built with TypeScript and Tailwind CSS to work alongside shadcn/ui. It is part of the Vercel OSS Program and provides UI building blocks for pricing, usage and subscription workflows that are wired to an app's own data.

The registry lists 34 blocks, from eight pricing table variants to invoice history, proration previews and payment failure screens. Components install through the shadcn registry or the @billingsdk/cli, which can also initialize billing in a new project with framework integration. Themes include Classic, Minimal and custom tokens.

Features

• Pricing tables: Eight pricing table variants plus usage-based pricing.
• Subscription management: Manage plans, status and details, with update plan cards and dialogs for upgrades and downgrades.
• Cancellation flow: Cancel subscription cards and dialogs with retention patterns.
• Usage meters: Linear and circular quota indicators, plus usage and detailed usage tables.
• Payments: Payment method selector, payment details forms, payment cards and a payment failure screen.
• Billing settings: Billing settings pages, upcoming charges, invoice history and a full billing screen.
• Notifications and offers: Banners, a limited offer dialog and a trial expiry card.
• Accessible: WCAG-compliant components with ARIA labels and keyboard support.

Tech stack

• React 19, Next.js 15
• TypeScript
• Tailwind CSS, shadcn/ui
• Motion

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @billingsdk/component-name