# Pricing Table Four
URL: /docs/components/pricing-table/pricing-table-four

The Pricing Table Four component provides a modern icon-based design for displaying pricing plans. This component features clean layouts, smooth animations, and support for both minimal and classic themes.

***

title: Pricing Table Four
description: The Pricing Table Four component provides a modern icon-based design for displaying pricing plans. This component features clean layouts, smooth animations, and support for both minimal and classic themes.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

## 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-four">
      <PricingTableFourDemo />
    </PreviewComponents>
  </Tab>

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

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

    export function PricingTableFourDemo() {
      return (
        <PricingTableFour
          plans={plans}
          title="Choose Your Perfect Plan"
          theme="classic"
          description="Transform your project with our comprehensive pricing options designed for every need."
          subtitle="Simple Pricing"
          onPlanSelect={(planId: string) => console.log("Selected plan:", planId)}
          size="medium"
          className="w-full"
          showBillingToggle={true}
          billingToggleLabels={{
            monthly: "Monthly",
            yearly: "Yearly",
          }}
        />
      );
    }

    ```
  </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-four">
      <PricingTableFourMinimalDemo />
    </PreviewComponents>
  </Tab>

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

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

    export function PricingTableFourMinimalDemo() {
      return (
        <PricingTableFour
          plans={plans}
          title="Choose Your Perfect Plan"
          theme="minimal"
          description="Transform your project with our comprehensive pricing options designed for every need."
          subtitle="Simple Pricing"
          onPlanSelect={(planId: string) => console.log("Selected plan:", planId)}
          size="medium"
          className="w-full"
          showBillingToggle={true}
          billingToggleLabels={{
            monthly: "Monthly",
            yearly: "Yearly",
          }}
        />
      );
    }

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

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

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

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

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

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

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

## Usage

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

```tsx
<PricingTableFour 
  plans={plans}
  title="Choose Your Perfect Plan"
  description="Transform your project with our comprehensive pricing options designed for every need."
  subtitle="Simple Pricing"
  onPlanSelect={(planId) => console.log('Selected plan:', planId)}
  size="medium" // 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                                                           |
| `subtitle`            | `string`                              | Optional subtitle text (displayed above title)                                 |
| `onPlanSelect`        | `(planId: string) => void`            | Callback when a plan is selected                                               |
| `size`                | `"small" \| "medium" \|  "large"`     | Size variant of the pricing table                                              |
| `theme`               | `"minimal" \| "classic"`              | Theme variant of the pricing table                                             |
| `showBillingToggle`   | `boolean`                             | Show/hide the monthly/yearly toggle (default: true)                            |
| `billingToggleLabels` | `{ monthly: string; yearly: string }` | Custom labels for billing toggle                                               |

## Features

* **Dual Theme Support**: Choose between minimal and classic themes
* **Icon-Based Design**: Each plan includes customizable icons for visual distinction
* **Responsive Layout**: Grid-based layout that adapts to different screen sizes
* **Interactive Elements**: Hover effects and smooth transitions
* **Billing Toggle**: Monthly/yearly billing toggle with discount display
* **Highlight Support**: Special styling for featured/popular plans with badges
* **Customizable Sizing**: Small, medium, and large size variants
* **Smooth Animations**: Animated price transitions and feature list reveals

## 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-four-demo.tsx"
"use client";

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

export function PricingTableFourDemo() {
  return (
    <PricingTableFour
      plans={plans}
      title="Choose Your Perfect Plan"
      theme="classic"
      description="Transform your project with our comprehensive pricing options designed for every need."
      subtitle="Simple Pricing"
      onPlanSelect={(planId: string) => console.log("Selected plan:", planId)}
      size="medium"
      className="w-full"
      showBillingToggle={true}
      billingToggleLabels={{
        monthly: "Monthly",
        yearly: "Yearly",
      }}
    />
  );
}

```