Billing SDK/Billing SDK
Pricing TablesPricing Table Seven

Pricing Table Seven

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

Playground

Classic Theme

Choose a plan that's right for you

We believe Untitled should be accessible to all companies, no matter the size of your startup.

15 users
Basic plan
Our most popular plan.
$10
Most popular
Business plan
Best for growing teams.
$20
Enterprise plan
Best for large teams.
$40

Overview

Basic features
Basic plan
Business plan
Enterprise plan
Users
Basic plan
10
Business plan
20
Enterprise plan
Unlimited
Individual data
Basic plan
20GB
Business plan
40GB
Enterprise plan
Unlimited
Support
Basic plan
Business plan
Enterprise plan
Automated workflows
Basic plan
—
Business plan
Enterprise plan
200+ integrations
Basic plan
—
Business plan
Enterprise plan

Reporting and analytics

Analytics
Basic plan
Basic
Business plan
Advanced
Enterprise plan
Advanced
Export reports
Basic plan
Business plan
Enterprise plan
Scheduled reports
Basic plan
Business plan
Enterprise plan
API access
Basic plan
—
Business plan
Enterprise plan
Advanced reports
Basic plan
—
Business plan
Enterprise plan
Saved reports
Basic plan
—
Business plan
Enterprise plan
Customer properties
Basic plan
—
Business plan
—
Enterprise plan
Custom fields
Basic plan
—
Business plan
—
Enterprise plan

User access

SSO/SAML authentication
Basic plan
Business plan
Enterprise plan
Advanced permissions
Basic plan
—
Business plan
Enterprise plan
Audit log
Basic plan
—
Business plan
—
Enterprise plan
Data history
Basic plan
—
Business plan
—
Enterprise plan
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"
    />
  );
}

Minimal Theme

Choose a plan that's right for you

We believe Untitled should be accessible to all companies, no matter the size of your startup.

15 users
Basic plan
Our most popular plan.
$10
Most popular
Business plan
Best for growing teams.
$20
Enterprise plan
Best for large teams.
$40

Overview

Basic features
Basic plan
Business plan
Enterprise plan
Users
Basic plan
10
Business plan
20
Enterprise plan
Unlimited
Individual data
Basic plan
20GB
Business plan
40GB
Enterprise plan
Unlimited
Support
Basic plan
Business plan
Enterprise plan
Automated workflows
Basic plan
—
Business plan
Enterprise plan
200+ integrations
Basic plan
—
Business plan
Enterprise plan

Reporting and analytics

Analytics
Basic plan
Basic
Business plan
Advanced
Enterprise plan
Advanced
Export reports
Basic plan
Business plan
Enterprise plan
Scheduled reports
Basic plan
Business plan
Enterprise plan
API access
Basic plan
—
Business plan
Enterprise plan
Advanced reports
Basic plan
—
Business plan
Enterprise plan
Saved reports
Basic plan
—
Business plan
Enterprise plan
Customer properties
Basic plan
—
Business plan
—
Enterprise plan
Custom fields
Basic plan
—
Business plan
—
Enterprise plan

User access

SSO/SAML authentication
Basic plan
Business plan
Enterprise plan
Advanced permissions
Basic plan
—
Business plan
Enterprise plan
Audit log
Basic plan
—
Business plan
—
Enterprise plan
Data history
Basic plan
—
Business plan
—
Enterprise plan
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"
    />
  );
}

Installation

npx shadcn@latest add @billingsdk/pricing-table-seven
pnpm dlx shadcn@latest add @billingsdk/pricing-table-seven
yarn dlx shadcn@latest add @billingsdk/pricing-table-seven
bunx shadcn@latest add @billingsdk/pricing-table-seven

Usage

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",
      },
    ],
  },
];
<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

PropTypeDescription
plansPricingTableSevenPlan[]Array of pricing plans
featuresFeatureCategory[]Array of feature categories with items
titlestringPage title (default: "Choose a plan that's right for you")
descriptionstringPage description
onPlanSelect(planId: string) => voidCallback when a plan is selected
size"small" | "medium" | "large"Component size variant
theme"minimal" | "classic"Theme variant
classNamestringAdditional CSS classes

Data Types

PricingTableSevenPlan

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

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

FeatureItemRecord

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 page.

Example

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"
    />
  );
}

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.

Manage Subscription

The Manage Subscription component provides a comprehensive interface for users to view and manage their current subscription details, including plan information, billing details, and actions to update or cancel their subscription.