Billing SDK

Modern, type-safe billing and subscription management components for React, built with TypeScript and Tailwind CSS. Designed to work seamlessly alongside shadcn/ui.

BillingSDK is part of the Vercel OSS Program.

Table of Contents

• Overview
• Features
• Components
• Quick Example
• Tech Stack
• Quick Start
• Installation in Your Project
• Documentation
• Contributing
• Contributors
• Star History
• License

Overview

Billing SDK provides production-ready UI building blocks for pricing, usage, and subscription workflows. Drop them into your app, wire up your data, and ship faster with consistent UX.

Features

• Ready-to-use components: End-to-end billing and subscription building blocks
• Multiple themes: Classic, Minimal, and custom theme tokens
• Responsive by default: Optimized for mobile, tablet, and desktop
• TypeScript-first: Strongly typed props for safe composition
• Easy integration: One-command install via CLI or shadcn/ui registry

Components

• Pricing Tables: Multiple variants for different use cases
• Subscription Management: Manage plans, status, and details
• Usage Meters: Linear and circular quota indicators
• Banner Notifications: Announcements and promotional banners
• Plan Updates: Upgrade/downgrade flows with clear affordances
• Cancellation Flow: Guided cancellation with retention patterns

Quick Example

import { PricingTableOne } from "@/components/billingsdk/pricing-table-one";

const plans = [
  {
    id: "starter",
    title: "Starter",
    price: 9,
    period: "month",
    features: ["100 requests", "Basic support", "1 project"],
    popular: false,
  },
  {
    id: "pro",
    title: "Pro",
    price: 29,
    period: "month",
    features: ["Unlimited requests", "Priority support", "10 projects"],
    popular: true,
  },
];

export default function App() {
  return (
    <PricingTableOne
      plans={plans}
      title="Choose your plan"
      description="Select the plan that works best for you"
      onPlanSelect={(planId) => {
        console.log("Selected plan:", planId);
      }}
      theme="classic"
      size="medium"
    />
  );
}

Tech Stack

• Runtime: React 19, Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• UI: shadcn/ui
• Animation: Motion

Quick Start

1. Install dependencies

npm install

1. Start the development server

npm run dev

1. Open http://localhost:3000

Installation in Your Project

Using CLI (Recommended)

For complete project setup with framework integration:

# Initialize billing to a new project
npx @billingsdk/cli init

# Add individual components
npx @billingsdk/cli add pricing-table-one

Manual Installation

Add Billing SDK components to your existing shadcn/ui project:

npx shadcn@latest add @billingsdk/[component-name]

Documentation

Explore docs, guides and interactive examples:

billingsdk.com/docs

Contributing

See CONTRIBUTING.md for development setup, project structure, and contribution guidelines.

Contributors

Thanks to all our amazing contributors for their support and code!

Star History

License

This project is licensed under the GNU General Public License (GPL), which allows you to use, modify, and distribute the software freely, provided that any derivative works are also distributed under the same license.