Quick Start

Add Components to Your Project

A React or Next.js project with Tailwind CSS is required. Install any component with a single command:

npx shadcn@latest add @billingsdk/pricing-table-one

pnpm dlx shadcn@latest add @billingsdk/pricing-table-one

npx shadcn@latest add @billingsdk/pricing-table-one

npx shadcn@latest add @billingsdk/pricing-table-one

npx @billingsdk/cli add pricing-table-one

pnpm dlx @billingsdk/cli add pricing-table-one

npx @billingsdk/cli add pricing-table-one

npx @billingsdk/cli add pricing-table-one

This will automatically install the component and its dependencies into your project.

From Existing Project?

All components are designed to integrate seamlessly with existing Next.js and React applications.

Quick Project Setup with CLI

For new projects or comprehensive billing integration, use our CLI tool for complete project setup with framework configuration and payment provider integration.

npx @billingsdk/cli init

pnpm dlx @billingsdk/cli init

npx @billingsdk/cli init

npx @billingsdk/cli init

The CLI provides an interactive setup that will:

Configure your framework (Next.js with App Router)
Set up payment provider integration (Dodo Payments, adding more providers soon)
Generate API routes for checkout, customer management, and webhooks
Install all necessary dependencies
Create configuration files and boilerplate code

What gets installed

The CLI automatically installs: provider's-api, standardwebhooks, zod, and other essential dependencies.

Refer to the CLI page for more information.

Add Individual Components

For existing projects, you can also add specific components using the CLI:

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

# Add subscription management
npx @billingsdk/cli add subscription-management

# Add usage monitoring
npx @billingsdk/cli add usage-meter-circle

Your First Component

Create your first billing component setup.

lib/billingsdk-config.ts

// no need to manually add this file. already added whenever you install a component.
export const plans = [{
  id: 'starter',
  title: 'Starter',
  description: 'Perfect for getting started',
  monthlyPrice: '$0',
  yearlyPrice: '$0',
  buttonText: 'Get Started',
  features: [
    { name: 'Basic features', icon: 'check' }
  ]
}]

Use the component in your application and see it in action.

npm run dev

pnpm run dev

yarn dev

bun run dev

Quick Examples

Install a Pricing Table

npx shadcn@latest add @billingsdk/pricing-table-one

Use in Your App

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

export default function PricingPage() {
  return (
    <PricingTableOne 
      plans={plans}
      title="Choose Your Plan"
      description="Select the perfect plan for your needs"
      onPlanSelect={(planId) => console.log('Selected plan:', planId)}
    />
  );
}