║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Quick Start description: Get up and running with Billing SDK in minutes

import { Tab, Tabs } from 'fumadocs-ui/components/tabs' import { Callout } from 'fumadocs-ui/components/callout'

Add Components to Your Project

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

<Tabs items={['shadcn', 'billingSDK']} defaultValue="shadcn" className="bg-transparent border-none"> <Tab value="shadcn" className="border-none bg-transparent p-0 mt-3"> <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs"> <Tab value="npx"> bash npx shadcn@latest add @billingsdk/pricing-table-one </Tab> <Tab value="pnpm"> bash pnpm dlx shadcn@latest add @billingsdk/pricing-table-one </Tab> <Tab value="yarn"> bash yarn dlx shadcn@latest add @billingsdk/pricing-table-one </Tab> <Tab value="bun"> bash bunx shadcn@latest add @billingsdk/pricing-table-one </Tab> </Tabs> </Tab> <Tab value="billingSDK" className="border-none bg-transparent p-0 mt-3"> <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs"> <Tab value="npx"> bash npx @billingsdk/cli add pricing-table-one </Tab> <Tab value="pnpm"> bash pnpm dlx @billingsdk/cli add pricing-table-one </Tab> <Tab value="yarn"> bash yarn dlx @billingsdk/cli add pricing-table-one </Tab> <Tab value="bun"> bash bunx @billingsdk/cli add pricing-table-one </Tab> </Tabs> </Tab> </Tabs>

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

<Callout title="From Existing Project?"> All components are designed to integrate seamlessly with existing Next.js and React applications. </Callout>

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.

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}> <Tab value="npm"> bash npx @billingsdk/cli init </Tab>

<Tab value="pnpm"> ```bash pnpm dlx @billingsdk/cli init ``` </Tab> <Tab value="yarn"> ```bash yarn dlx @billingsdk/cli init ``` </Tab> <Tab value="bun"> ```bash bunx @billingsdk/cli init ``` </Tab> </Tabs>

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

<Callout title="What gets installed"> The CLI automatically installs: `provider's-api`, `standardwebhooks`, `zod`, and other essential dependencies. </Callout> Refer to the [CLI](/docs/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.

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

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}> <Tab value="npm"> bash npm run dev </Tab>

<Tab value="pnpm"> ```bash pnpm run dev ``` </Tab> <Tab value="yarn"> ```bash yarn dev ``` </Tab> <Tab value="bun"> ```bash bun run dev ``` </Tab> </Tabs>

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)}
    />
  );
}

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║