# Pricing Table Two
URL: /docs/components/pricing-table/pricing-table-two

The Pricing Table Two component offers an alternative design approach for pricing displays. You can use this component to display your pricing plans in an alternative way.

***

title: Pricing Table Two
description: The Pricing Table Two component offers an alternative design approach for pricing displays. You can use this component to display your pricing plans in an alternative way.

***

## Classic Theme

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="pricing-table-two">
      <PricingTableTwoDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="src/components/pricing-table-two-demo.tsx"
    "use client";

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

    export function PricingTableTwoDemo() {
      return (
        <PricingTableTwo
          plans={plans}
          className="mx-auto w-full max-w-4xl"
          title={`We offer ${plans.length} plans`}
          description="Choose the plan that's right for you"
          onPlanSelect={(planId) => console.log("Selected plan:", planId)}
          size="small" // small, medium, large
          theme="classic" // minimal or classic
        />
      );
    }

    ```
  </Tab>
</Tabs>

## Minimal Theme

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="pricing-table-two">
      <PricingTableTwoMinimalDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="src/components/pricing-table-two-minimal-demo.tsx"
    "use client";

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

    export function PricingTableTwoMinimalDemo() {
      return (
        <>
          <PricingTableTwo
            plans={plans}
            className="mx-auto w-full max-w-4xl"
            title={`We offer ${plans.length} plans`}
            description="Choose the plan that's right for you"
            onPlanSelect={(planId) => console.log("Selected plan:", planId)}
            size="small" // small, medium, large
            theme="minimal" // minimal or classic
          />
        </>
      );
    }

    ```
  </Tab>
</Tabs>

## Installation

<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-two
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @billingsdk/pricing-table-two
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @billingsdk/pricing-table-two
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx shadcn@latest add @billingsdk/pricing-table-two
        ```
      </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-two
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx @billingsdk/cli add pricing-table-two
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx @billingsdk/cli add pricing-table-two
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx @billingsdk/cli add pricing-table-two
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Usage

```tsx
import { PricingTableTwo } from "@/components/billingsdk/pricing-table-two";
import { plans } from "@/lib/billingsdk-config";
```

```tsx
<PricingTableTwo 
  plans={plans}
  title="Choose Your Plan"
  description="Select the perfect plan for your needs"
  onPlanSelect={(planId) => console.log('Selected plan:', planId)}
  size="small" // small, medium, large
  theme="classic" // minimal or classic
/>
```

## Props

| Prop           | Type                              | Description                                                                    |
| -------------- | --------------------------------- | ------------------------------------------------------------------------------ |
| `plans`        | `Plan[]`                          | Array of pricing plans (see [Plan interface](/docs/interfaces#plan-interface)) |
| `title`        | `string`                          | Main title for the pricing section                                             |
| `description`  | `string`                          | Subtitle description                                                           |
| `onPlanSelect` | `(planId: string) => void`        | Callback when a plan is selected                                               |
| `variant`      | `"small" \| "medium" \|  "large"` | Size variant of the pricing table                                              |

## Theming

The pricing table component is styled using the `shadcn/ui` library. You can customize the colors and fonts by overriding the CSS variables. You can also get the theme from the [Theming](/docs/theming) page.

## Example

```tsx title="src/components/pricing-table-two-demo.tsx"
"use client";

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

export function PricingTableTwoDemo() {
  return (
    <PricingTableTwo
      plans={plans}
      className="mx-auto w-full max-w-4xl"
      title={`We offer ${plans.length} plans`}
      description="Choose the plan that's right for you"
      onPlanSelect={(planId) => console.log("Selected plan:", planId)}
      size="small" // small, medium, large
      theme="classic" // minimal or classic
    />
  );
}

```