# Quick Start
URL: /docs/quick-start

Get up and running with Billing SDK in minutes

***

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:

```bash
# 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.

```tsx title="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.

<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

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

### Use in Your App

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