# Pricing Table Eight
URL: /docs/components/pricing-table/pricing-table-eight

A pricing table component with hover-to-reveal pricing and features.

***

title: Pricing Table Eight
description: A pricing table component with hover-to-reveal pricing and features.
---------------------------------------------------------------------------------

## Preview

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

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

    import { PricingTableEight } from "@/components/billingsdk/pricing-table-eight";
    import { plans as basePlans } from "@/lib/billingsdk-config";

    const plans = basePlans.map((plan) => {
      if (plan.id === "starter") {
        return { ...plan, description: "Do you just want to start testing?" };
      }
      if (plan.id === "pro") {
        return {
          ...plan,
          description: "Do you want to unlock full production features?",
        };
      }
      if (plan.id === "enterprise") {
        return {
          ...plan,
          description: "Do you want dedicated security and scale?",
        };
      }
      return plan;
    });
    export function PricingTableEightDemo() {
      return (
        <PricingTableEight
          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>

## 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-eight
        ```
      </Tab>

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

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

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

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

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

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

## Usage

```tsx
import { PricingTableEight } from "@/components/billingsdk/pricing-table-eight"
import { plans as basePlans} from "@/lib/billingsdk-config"

const plans = basePlans.map(plan => {
  if (plan.id === 'starter') {
    return { ...plan, description: 'Do you just want to start testing?' };
  }
  if (plan.id === 'pro') {
    return { ...plan, description: 'Do you want to unlock full production features?' };
  }
  if (plan.id === 'enterprise') {
    return { ...plan, description: 'Do you want dedicated security and scale?' };
  }
  return plan;
});
export function PricingTableEightDemo() {
  return (
    <PricingTableEight
      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",
      }}
    />
  )
}
```

## 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 small subtitle above title                                            |
| `onPlanSelect`        | `(planId: string) => void`            | Callback when a plan is selected                                               |
| `showBillingToggle`   | `boolean`                             | Show monthly/yearly billing toggle (default: true)                             |
| `billingToggleLabels` | `{ monthly: string; yearly: string }` | Custom labels for billing toggle                                               |
| `size`                | `"small" \| "medium" \| "large"`      | Component size variant                                                         |
| `theme`               | `"minimal" \| "classic"`              | Theme variant of the pricing table                                             |
| `className`           | `string`                              | Additional CSS classes                                                         |

## Features

* **Hover-to-Reveal Design**: Prices and features elegantly reveal on hover for a clean, minimal initial state
* **Mobile-Optimized**: Shows full content by default on mobile, hover-reveal only on desktop
* **Dual Theme Support**: Choose between minimal and classic themes with distinct visual styles
* **Billing Toggle**: Monthly/yearly pricing with automatic discount calculation
* **Plan Highlights**: Mark popular plans with badges and special styling
* **Smooth Animations**: Framer Motion animations for price transitions and feature list reveals
* **Responsive Layout**: Adapts seamlessly from mobile to large screens
* **Accessibility**: Comprehensive ARIA labels for screen readers
* **Plan Icons**: Automatic or custom icons for different plan types

## 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/registry/billingsdk/demo/pricing-table-eight-demo.tsx"
"use client";

import { PricingTableEight } from "@/components/billingsdk/pricing-table-eight";
import { plans as basePlans } from "@/lib/billingsdk-config";

const plans = basePlans.map((plan) => {
  if (plan.id === "starter") {
    return { ...plan, description: "Do you just want to start testing?" };
  }
  if (plan.id === "pro") {
    return {
      ...plan,
      description: "Do you want to unlock full production features?",
    };
  }
  if (plan.id === "enterprise") {
    return {
      ...plan,
      description: "Do you want dedicated security and scale?",
    };
  }
  return plan;
});
export function PricingTableEightDemo() {
  return (
    <PricingTableEight
      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",
      }}
    />
  );
}

```