Billing SDK/Billing SDK
Pricing TablesPricing Table Two

Pricing Table Two

The Pricing Table Two component offers an alternative design approach for pricing displays. You can use this component to display your pricing plans in an alternative way.

Classic Theme

We offer 3 plans

Choose the plan that's right for you

MonthlyYearly
Save upto 17% with yearly plan
Starter

For developers testing out Liveblocks locally.

$0

per month

Pro

For companies adding collaboration in production.

$20

per month

Enterprise

For organizations that need more support and compliance features.

Custom

per month

StarterProEnterprise
Presence
Comments
Notifications
Text Editor
Sync Datastore
src/components/pricing-table-two-demo.tsx
"use client"

import { plans } from "@/lib/billingsdk-config";
import { PricingTableTwo } from "@/components/billingsdk/pricing-table-two";

export function PricingTableTwoDemo() {
    return <>
        <PricingTableTwo plans={plans} className="w-full max-w-4xl mx-auto"
            title={`We offer ${plans.length} plans`}
            description="Choose the plan that's right for you"
            onPlanSelect={(planId) => console.log('Selected plan:', planId)}
            size="small" // small, medium, large
            theme="classic" // minimal or classic
        />
    </>
}

Minimal Theme

We offer 3 plans

Choose the plan that's right for you

MonthlyYearly
Save upto 17% with yearly plan
Starter

For developers testing out Liveblocks locally.

$0

per month

Pro

For companies adding collaboration in production.

$20

per month

Enterprise

For organizations that need more support and compliance features.

Custom

per month

StarterProEnterprise
Presence
Comments
Notifications
Text Editor
Sync Datastore
src/components/pricing-table-two-minimal-demo.tsx
"use client"

import { plans } from "@/lib/billingsdk-config";
import { PricingTableTwo } from "@/components/billingsdk/pricing-table-two";

export function PricingTableTwoMinimalDemo() {
    return <>
        <PricingTableTwo plans={plans} className="w-full max-w-4xl mx-auto"
            title={`We offer ${plans.length} plans`}
            description="Choose the plan that's right for you"
            onPlanSelect={(planId) => console.log('Selected plan:', planId)}
            size="small" // small, medium, large
            theme="minimal" // minimal or classic
        />
    </>
}

Installation

npx shadcn@latest add @billingsdk/pricing-table-two
pnpm dlx shadcn@latest add @billingsdk/pricing-table-two
npx shadcn@latest add @billingsdk/pricing-table-two
npx @billingsdk/cli add pricing-table-two
pnpm dlx @billingsdk/cli add pricing-table-two
npx @billingsdk/cli add pricing-table-two

Usage

import { PricingTableTwo } from "@/components/billingsdk/pricing-table-two";
import { plans } from "@/lib/billingsdk-config";
<PricingTableTwo 
  plans={plans}
  title="Choose Your Plan"
  description="Select the perfect plan for your needs"
  onPlanSelect={(planId) => console.log('Selected plan:', planId)}
  size="small" // small, medium, large
  theme="classic" // minimal or classic
/>

Props

PropTypeDescription
plansPlan[]Array of pricing plans (see Plan interface)
titlestringMain title for the pricing section
descriptionstringSubtitle description
onPlanSelect(planId: string) => voidCallback when a plan is selected
variant"small" | "medium" | "large"Size variant of the pricing table

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/components/pricing-table-two-demo.tsx
"use client"

import { plans } from "@/lib/billingsdk-config";
import { PricingTableTwo } from "@/components/billingsdk/pricing-table-two";

export function PricingTableTwoDemo() {
    return <>
        <PricingTableTwo plans={plans} className="w-full max-w-4xl mx-auto"
            title={`We offer ${plans.length} plans`}
            description="Choose the plan that's right for you"
            onPlanSelect={(planId) => console.log('Selected plan:', planId)}
            size="small" // small, medium, large
            theme="classic" // minimal or classic
        />
    </>
}

Pricing Table One

The Pricing Table One component provides a clean and modern design for displaying pricing plans. You can use this component to display your pricing plans in a clean and modern way.

Pricing Table Three

The Pricing Table Three component provides a third design option for pricing displays. You can use this component to display your pricing plans in a third way.