# Pricing Table Six
URL: /docs/components/pricing-table/pricing-table-six

The Pricing Table Six component provides a modern gradient design for displaying pricing plans. This component features beautiful gradients, smooth animations, and a contemporary card-based layout.

***

title: Pricing Table Six
description: The Pricing Table Six component provides a modern gradient design for displaying pricing plans. This component features beautiful gradients, smooth animations, and a contemporary card-based layout.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<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-six">
      <PricingTableSixDemo />
    </PreviewComponents>
  </Tab>

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

    import {
      PlanProps,
      PricingTableSix,
    } from "@/registry/billingsdk/pricing-table-six";

    export function PricingTableSixDemo() {
      const plans: PlanProps[] = [
        {
          id: "basic",
          title: "Starter",
          description: "Best for individuals and small teams",
          monthlyPrice: 0,
          yearlyPrice: 0,
          features: [
            "Core tools with modest usage allowances",
            "Getting-started guides to launch quickly",
            "Fundamental analytics and reports",
            "Standard email assistance",
          ],
        },
        {
          id: "premium",
          title: "Growth",
          description: "Built for expanding teams",
          monthlyPrice: 50,
          yearlyPrice: 500,
          isFeatured: true,
          features: [
            "Advanced tools with priority updates",
            "Onboarding guides to ramp fast",
            "Live chat support access",
            "Automation to streamline workflows",
            "Premium tutorials and webinars access",
          ],
        },
        {
          id: "custom",
          title: "Enterprise",
          description: "Tailored for specialized requirements",
          monthlyPrice: 99,
          yearlyPrice: 990,
          isCustom: true,
          features: [
            "Unlimited users, projects, and data",
            "Resources that scale with your needs",
            "24/7 priority support",
            "White-label reports, dashboards, and UIs",
            "Support for custom API integrations",
            "Works with advanced or proprietary systems",
          ],
        },
      ];

      return (
        <PricingTableSix
          plans={plans}
          onPlanSelect={(planId: string) => console.log("Selected plan:", planId)}
        />
      );
    }

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

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

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

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

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

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

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

## Usage

```tsx
import { PricingTableSix } from "@/components/billingsdk/pricing-table-six";
import { PlanProps } from "@/registry/billingsdk/pricing-table-six";
import { plans } from "@/lib/billingsdk-config";

const plans: PlanProps[] = [
        {
          id: "basic",
          title: "Starter",
          description: "Best for individuals and small teams",
          monthlyPrice: 0,
          yearlyPrice: 0,
          features: [
            "Core tools with modest usage allowances",
            "Getting-started guides to launch quickly",
            "Fundamental analytics and reports",
            "Standard email assistance",
          ]
        },
        {
          id: "premium",
          title: "Growth",
          description: "Built for expanding teams",
          monthlyPrice: 50,
          yearlyPrice: 500,
          isFeatured: true,
          features: [
            "Advanced tools with priority updates",
            "Onboarding guides to ramp fast",
            "Live chat support access",
            "Automation to streamline workflows",
            "Premium tutorials and webinars access",
          ]
        },
        {
          id: "custom",
          title: "Enterprise",
          description: "Tailored for specialized requirements",
          monthlyPrice: 99,
          yearlyPrice: 990,
          isCustom: true,
          features: [
            "Unlimited users, projects, and data",
            "Resources that scale with your needs",
            "24/7 priority support",
            "White-label reports, dashboards, and UIs",
            "Support for custom API integrations",
            "Works with advanced or proprietary systems",
          ]
        },
      ]

  <PricingTableSix 
    plans={plans}
    onPlanSelect={(planId) => console.log('Selected plan:', planId)}
  />
```

## Props

| Prop           | Type                       | Description                      |
| -------------- | -------------------------- | -------------------------------- |
| `plans`        | `PlanProps[]`              | Array of pricing plans           |
| `onPlanSelect` | `(planId: string) => void` | Callback when a plan is selected |

## Features

* **Responsive Layout**: Grid layout that adapts cleanly across breakpoints
* **Interactive Elements**: Subtle hover effects and smooth transitions
* **Billing Toggle**: Monthly/yearly switch with animated price changes
* **Highlight Support**: Distinct styling for featured or popular plans
* **Theming & Tokens**: Easily themeable with Tailwind and `shadcn/ui` primitives

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

import {
  PlanProps,
  PricingTableSix,
} from "@/registry/billingsdk/pricing-table-six";

export function PricingTableSixDemo() {
  const plans: PlanProps[] = [
    {
      id: "basic",
      title: "Starter",
      description: "Best for individuals and small teams",
      monthlyPrice: 0,
      yearlyPrice: 0,
      features: [
        "Core tools with modest usage allowances",
        "Getting-started guides to launch quickly",
        "Fundamental analytics and reports",
        "Standard email assistance",
      ],
    },
    {
      id: "premium",
      title: "Growth",
      description: "Built for expanding teams",
      monthlyPrice: 50,
      yearlyPrice: 500,
      isFeatured: true,
      features: [
        "Advanced tools with priority updates",
        "Onboarding guides to ramp fast",
        "Live chat support access",
        "Automation to streamline workflows",
        "Premium tutorials and webinars access",
      ],
    },
    {
      id: "custom",
      title: "Enterprise",
      description: "Tailored for specialized requirements",
      monthlyPrice: 99,
      yearlyPrice: 990,
      isCustom: true,
      features: [
        "Unlimited users, projects, and data",
        "Resources that scale with your needs",
        "24/7 priority support",
        "White-label reports, dashboards, and UIs",
        "Support for custom API integrations",
        "Works with advanced or proprietary systems",
      ],
    },
  ];

  return (
    <PricingTableSix
      plans={plans}
      onPlanSelect={(planId: string) => console.log("Selected plan:", planId)}
    />
  );
}

```

### Credits

* Created by [@vamsisai696](https://x.com/vamsisai696)