# Pricing Table Seven
URL: /docs/components/pricing-table/pricing-table-seven

The Pricing Table Seven component provides a feature-comparison pricing table with aligned cards and user slider for comprehensive plan comparison.

***

title: Pricing Table Seven
description: The Pricing Table Seven component provides a feature-comparison pricing table with aligned cards and user slider for comprehensive plan comparison.
----------------------------------------------------------------------------------------------------------------------------------------------------------------

## 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-seven">
      <PricingTableSevenDemo />
    </PreviewComponents>
  </Tab>

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

    import { PricingTableSeven } from "@/components/billingsdk/pricing-table-seven";

    const plans = [
      {
        id: "basic",
        name: "Basic plan",
        description: "Our most popular plan.",
        price: 10,
        popular: false,
        users: 5,
      },
      {
        id: "business",
        name: "Business plan",
        description: "Best for growing teams.",
        price: 20,
        popular: true,
        users: 15,
      },
      {
        id: "enterprise",
        name: "Enterprise plan",
        description: "Best for large teams.",
        price: 40,
        popular: false,
        users: 25,
      },
    ];

    const features = [
      {
        category: "Overview",
        items: [
          {
            name: "Basic features",
            tooltip: true,
            basic: true,
            business: true,
            enterprise: true,
          },
          {
            name: "Users",
            tooltip: true,
            basic: "10",
            business: "20",
            enterprise: "Unlimited",
          },
          {
            name: "Individual data",
            tooltip: true,
            basic: "20GB",
            business: "40GB",
            enterprise: "Unlimited",
          },
          {
            name: "Support",
            tooltip: true,
            basic: true,
            business: true,
            enterprise: true,
          },
          {
            name: "Automated workflows",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
          {
            name: "200+ integrations",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
        ],
      },
      {
        category: "Reporting and analytics",
        items: [
          {
            name: "Analytics",
            tooltip: true,
            basic: "Basic",
            business: "Advanced",
            enterprise: "Advanced",
          },
          {
            name: "Export reports",
            tooltip: true,
            basic: true,
            business: true,
            enterprise: true,
          },
          {
            name: "Scheduled reports",
            tooltip: true,
            basic: true,
            business: true,
            enterprise: true,
          },
          {
            name: "API access",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
          {
            name: "Advanced reports",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
          {
            name: "Saved reports",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
          {
            name: "Customer properties",
            tooltip: true,
            basic: false,
            business: false,
            enterprise: true,
          },
          {
            name: "Custom fields",
            tooltip: true,
            basic: false,
            business: false,
            enterprise: true,
          },
        ],
      },
      {
        category: "User access",
        items: [
          {
            name: "SSO/SAML authentication",
            tooltip: true,
            basic: true,
            business: true,
            enterprise: true,
          },
          {
            name: "Advanced permissions",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
          {
            name: "Audit log",
            tooltip: true,
            basic: false,
            business: false,
            enterprise: true,
          },
          {
            name: "Data history",
            tooltip: true,
            basic: false,
            business: false,
            enterprise: true,
          },
        ],
      },
    ];

    export function PricingTableSevenDemo() {
      return (
        <PricingTableSeven
          plans={plans}
          features={features}
          title="Choose a plan that's right for you"
          description="We believe Untitled should be accessible to all companies, no matter the size of your startup."
          onPlanSelect={(planId: string) => console.log("Selected plan:", planId)}
          size="medium"
          theme="classic"
          className="w-full"
        />
      );
    }

    ```
  </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-seven">
      <PricingTableSevenMinimalDemo />
    </PreviewComponents>
  </Tab>

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

    import { PricingTableSeven } from "@/components/billingsdk/pricing-table-seven";

    const plans = [
      {
        id: "basic",
        name: "Basic plan",
        description: "Our most popular plan.",
        price: 10,
        popular: false,
        users: 5,
      },
      {
        id: "business",
        name: "Business plan",
        description: "Best for growing teams.",
        price: 20,
        popular: true,
        users: 15,
      },
      {
        id: "enterprise",
        name: "Enterprise plan",
        description: "Best for large teams.",
        price: 40,
        popular: false,
        users: 25,
      },
    ];

    const features = [
      {
        category: "Overview",
        items: [
          {
            name: "Basic features",
            tooltip: true,
            basic: true,
            business: true,
            enterprise: true,
          },
          {
            name: "Users",
            tooltip: true,
            basic: "10",
            business: "20",
            enterprise: "Unlimited",
          },
          {
            name: "Individual data",
            tooltip: true,
            basic: "20GB",
            business: "40GB",
            enterprise: "Unlimited",
          },
          {
            name: "Support",
            tooltip: true,
            basic: true,
            business: true,
            enterprise: true,
          },
          {
            name: "Automated workflows",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
          {
            name: "200+ integrations",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
        ],
      },
      {
        category: "Reporting and analytics",
        items: [
          {
            name: "Analytics",
            tooltip: true,
            basic: "Basic",
            business: "Advanced",
            enterprise: "Advanced",
          },
          {
            name: "Export reports",
            tooltip: true,
            basic: true,
            business: true,
            enterprise: true,
          },
          {
            name: "Scheduled reports",
            tooltip: true,
            basic: true,
            business: true,
            enterprise: true,
          },
          {
            name: "API access",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
          {
            name: "Advanced reports",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
          {
            name: "Saved reports",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
          {
            name: "Customer properties",
            tooltip: true,
            basic: false,
            business: false,
            enterprise: true,
          },
          {
            name: "Custom fields",
            tooltip: true,
            basic: false,
            business: false,
            enterprise: true,
          },
        ],
      },
      {
        category: "User access",
        items: [
          {
            name: "SSO/SAML authentication",
            tooltip: true,
            basic: true,
            business: true,
            enterprise: true,
          },
          {
            name: "Advanced permissions",
            tooltip: true,
            basic: false,
            business: true,
            enterprise: true,
          },
          {
            name: "Audit log",
            tooltip: true,
            basic: false,
            business: false,
            enterprise: true,
          },
          {
            name: "Data history",
            tooltip: true,
            basic: false,
            business: false,
            enterprise: true,
          },
        ],
      },
    ];

    export function PricingTableSevenMinimalDemo() {
      return (
        <PricingTableSeven
          plans={plans}
          features={features}
          title="Choose a plan that's right for you"
          description="We believe Untitled should be accessible to all companies, no matter the size of your startup."
          onPlanSelect={(planId: string) => console.log("Selected plan:", planId)}
          size="medium"
          theme="minimal"
          className="w-full"
        />
      );
    }

    ```
  </Tab>
</Tabs>

## Installation

<Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs">
  <Tab value="npx">
    ```bash
    npx shadcn@latest add @billingsdk/pricing-table-seven
    ```
  </Tab>

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

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

  <Tab value="bun">
    ```bash
    bunx shadcn@latest add @billingsdk/pricing-table-seven
    ```
  </Tab>
</Tabs>

## Usage

```tsx
import { PricingTableSeven } from "@/components/billingsdk/pricing-table-seven";

const plans = [
  {
    id: "basic",
    name: "Basic plan",
    description: "Our most popular plan.",
    price: 10,
    popular: false,
    users: 5,
  },
  {
    id: "business",
    name: "Business plan",
    description: "Best for growing teams.",
    price: 20,
    popular: true,
    users: 15,
  },
  {
    id: "enterprise",
    name: "Enterprise plan",
    description: "Best for large teams.",
    price: 40,
    popular: false,
    users: 25,
  },
];

const features = [
  {
    category: "Overview",
    items: [
      {
        name: "Basic features",
        tooltip: true,
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "Users",
        tooltip: true,
        basic: "10",
        business: "20",
        enterprise: "Unlimited",
      },
    ],
  },
];
```

```tsx
<PricingTableSeven
  plans={plans}
  features={features}
  title="Choose a plan that's right for you"
  description="We believe Untitled should be accessible to all companies, no matter the size of your startup."
  onPlanSelect={(planId) => console.log('Selected plan:', planId)}
  size="medium" // small, medium, large
  theme="classic" // minimal or classic
/>
```

## Props

| Prop           | Type                             | Description                                                |
| -------------- | -------------------------------- | ---------------------------------------------------------- |
| `plans`        | `PricingTableSevenPlan[]`        | Array of pricing plans                                     |
| `features`     | `FeatureCategory[]`              | Array of feature categories with items                     |
| `title`        | `string`                         | Page title (default: "Choose a plan that's right for you") |
| `description`  | `string`                         | Page description                                           |
| `onPlanSelect` | `(planId: string) => void`       | Callback when a plan is selected                           |
| `size`         | `"small" \| "medium" \| "large"` | Component size variant                                     |
| `theme`        | `"minimal" \| "classic"`         | Theme variant                                              |
| `className`    | `string`                         | Additional CSS classes                                     |

## Data Types

### PricingTableSevenPlan

```tsx
interface PricingTableSevenPlan {
  id: string;                    // Unique identifier for the plan
  name: string;                  // Display name of the plan
  description: string;           // Plan description
  price: number;                 // Price in dollars
  users: number | string;        // Number of users (can be "25+" for unlimited)
  popular?: boolean;             // Whether this plan is marked as popular
}
```

### FeatureCategory

```tsx
interface FeatureCategory {
  category: string;              // Category name (e.g., "Overview", "Reporting")
  items: FeatureItemRecord[];    // Array of features in this category
}
```

### FeatureItemRecord

```tsx
interface FeatureItemRecord {
  name: string;                  // Feature name
  tooltip?: boolean;             // Whether to show tooltip icon
  [planId: string]: boolean | string | undefined;  // Feature value per plan
}
```

## Features

* **Dual Theme Support**: Choose between minimal and classic themes
* **Interactive Plan Selection**: Users can click on pricing cards to select plans
* **Feature Comparison Table**: Detailed feature comparison across all plans
* **User Slider**: Interactive slider showing current plan's user count with real-time plan updates
* **Responsive Design**: Mobile-first approach with responsive grid layouts
* **Accessibility**: ARIA labels, keyboard navigation, and screen reader support
* **Customizable Sizing**: Small, medium, and large size variants
* **TypeScript Support**: Full type safety with comprehensive interfaces
* **Smooth Animations**: Transitions and hover effects using Framer Motion

## Theming

The pricing table component supports two themes:

* **Minimal**: Clean, simple design with subtle styling
* **Classic**: Enhanced design with gradients and visual effects

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

import { PricingTableSeven } from "@/components/billingsdk/pricing-table-seven";

const plans = [
  {
    id: "basic",
    name: "Basic plan",
    description: "Our most popular plan.",
    price: 10,
    popular: false,
    users: 5,
  },
  {
    id: "business",
    name: "Business plan",
    description: "Best for growing teams.",
    price: 20,
    popular: true,
    users: 15,
  },
  {
    id: "enterprise",
    name: "Enterprise plan",
    description: "Best for large teams.",
    price: 40,
    popular: false,
    users: 25,
  },
];

const features = [
  {
    category: "Overview",
    items: [
      {
        name: "Basic features",
        tooltip: true,
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "Users",
        tooltip: true,
        basic: "10",
        business: "20",
        enterprise: "Unlimited",
      },
      {
        name: "Individual data",
        tooltip: true,
        basic: "20GB",
        business: "40GB",
        enterprise: "Unlimited",
      },
      {
        name: "Support",
        tooltip: true,
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "Automated workflows",
        tooltip: true,
        basic: false,
        business: true,
        enterprise: true,
      },
      {
        name: "200+ integrations",
        tooltip: true,
        basic: false,
        business: true,
        enterprise: true,
      },
    ],
  },
  {
    category: "Reporting and analytics",
    items: [
      {
        name: "Analytics",
        tooltip: true,
        basic: "Basic",
        business: "Advanced",
        enterprise: "Advanced",
      },
      {
        name: "Export reports",
        tooltip: true,
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "Scheduled reports",
        tooltip: true,
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "API access",
        tooltip: true,
        basic: false,
        business: true,
        enterprise: true,
      },
      {
        name: "Advanced reports",
        tooltip: true,
        basic: false,
        business: true,
        enterprise: true,
      },
      {
        name: "Saved reports",
        tooltip: true,
        basic: false,
        business: true,
        enterprise: true,
      },
      {
        name: "Customer properties",
        tooltip: true,
        basic: false,
        business: false,
        enterprise: true,
      },
      {
        name: "Custom fields",
        tooltip: true,
        basic: false,
        business: false,
        enterprise: true,
      },
    ],
  },
  {
    category: "User access",
    items: [
      {
        name: "SSO/SAML authentication",
        tooltip: true,
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "Advanced permissions",
        tooltip: true,
        basic: false,
        business: true,
        enterprise: true,
      },
      {
        name: "Audit log",
        tooltip: true,
        basic: false,
        business: false,
        enterprise: true,
      },
      {
        name: "Data history",
        tooltip: true,
        basic: false,
        business: false,
        enterprise: true,
      },
    ],
  },
];

export function PricingTableSevenDemo() {
  return (
    <PricingTableSeven
      plans={plans}
      features={features}
      title="Choose a plan that's right for you"
      description="We believe Untitled should be accessible to all companies, no matter the size of your startup."
      onPlanSelect={(planId: string) => console.log("Selected plan:", planId)}
      size="medium"
      theme="classic"
      className="w-full"
    />
  );
}

```