Billing SDK/Billing SDK
Pricing TablesPricing Table Eight

Pricing Table Eight

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

Playground

Preview

Simple Pricing

Choose Your Perfect Plan

Transform your project with our comprehensive pricing options designed for every need.

Starter

Do you just want to start testing?

$0/month
  • Presence
  • Comments
  • Notifications
  • Text Editor
  • Sync Datastore
Most popular

Pro

Do you want to unlock full production features?

$20/month
  • Presence
  • Comments
  • Notifications
  • Text Editor
  • Sync Datastore

Enterprise

Do you want dedicated security and scale?

Custom/month
  • Presence
  • Comments
  • Notifications
  • Text Editor
  • Sync Datastore
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",
      }}
    />
  );
}

Installation

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

Usage

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

PropTypeDescription
plansPlan[]Array of pricing plans (see Plan interface)
titlestringMain title for the pricing section
descriptionstringSubtitle description
subtitlestringOptional small subtitle above title
onPlanSelect(planId: string) => voidCallback when a plan is selected
showBillingTogglebooleanShow 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
classNamestringAdditional 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 page.

Example

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

Pricing Table Seven

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

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.