Billing SDK/Billing SDK
Pricing TablesPricing Table Four

Pricing Table Four

The Pricing Table Four component provides a modern icon-based design for displaying pricing plans. This component features clean layouts, smooth animations, and support for both minimal and classic themes.

Playground

Classic Theme

Simple Pricing

Choose Your Perfect Plan

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

Starter

For developers testing out Liveblocks locally.

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

Pro

For companies adding collaboration in production.

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

Enterprise

For organizations that need more support and compliance features.

Custom/month
  • Presence
  • Comments
  • Notifications
  • Text Editor
  • Sync Datastore
src/components/pricing-table-four-demo.tsx
"use client"

import { PricingTableFour } from "@/components/billingsdk/pricing-table-four"
import { plans } from "@/lib/billingsdk-config"

export function PricingTableFourDemo() {
  return (
    <PricingTableFour
      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",
      }}
    />
  )
}

Minimal Theme

Simple Pricing

Choose Your Perfect Plan

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

Starter

For developers testing out Liveblocks locally.

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

Pro

For companies adding collaboration in production.

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

Enterprise

For organizations that need more support and compliance features.

Custom/month
  • Presence
  • Comments
  • Notifications
  • Text Editor
  • Sync Datastore
src/components/pricing-table-four-minimal-demo.tsx
"use client"

import { PricingTableFour } from "@/components/billingsdk/pricing-table-four"
import { plans } from "@/lib/billingsdk-config"

export function PricingTableFourMinimalDemo() {
  return (
    <PricingTableFour
      plans={plans}
      title="Choose Your Perfect Plan"
      theme="minimal"
      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-four
pnpm dlx shadcn@latest add @billingsdk/pricing-table-four
yarn dlx shadcn@latest add @billingsdk/pricing-table-four
bunx shadcn@latest add @billingsdk/pricing-table-four
npx @billingsdk/cli add pricing-table-four
pnpm dlx @billingsdk/cli add pricing-table-four
yarn dlx @billingsdk/cli add pricing-table-four
bunx @billingsdk/cli add pricing-table-four

Usage

import { PricingTableFour } from "@/components/billingsdk/pricing-table-four";
import { plans } from "@/lib/billingsdk-config";
<PricingTableFour 
  plans={plans}
  title="Choose Your Perfect Plan"
  description="Transform your project with our comprehensive pricing options designed for every need."
  subtitle="Simple Pricing"
  onPlanSelect={(planId) => console.log('Selected plan:', planId)}
  size="medium" // 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
subtitlestringOptional subtitle text (displayed above title)
onPlanSelect(planId: string) => voidCallback when a plan is selected
size"small" | "medium" | "large"Size variant of the pricing table
theme"minimal" | "classic"Theme variant of the pricing table
showBillingTogglebooleanShow/hide the monthly/yearly toggle (default: true)
billingToggleLabels{ monthly: string; yearly: string }Custom labels for billing toggle

Features

  • Dual Theme Support: Choose between minimal and classic themes
  • Icon-Based Design: Each plan includes customizable icons for visual distinction
  • Responsive Layout: Grid-based layout that adapts to different screen sizes
  • Interactive Elements: Hover effects and smooth transitions
  • Billing Toggle: Monthly/yearly billing toggle with discount display
  • Highlight Support: Special styling for featured/popular plans with badges
  • Customizable Sizing: Small, medium, and large size variants
  • Smooth Animations: Animated price transitions and feature list reveals

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

import { PricingTableFour } from "@/components/billingsdk/pricing-table-four"
import { plans } from "@/lib/billingsdk-config"

export function PricingTableFourDemo() {
  return (
    <PricingTableFour
      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 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.

Pricing Table Five

The Pricing Table Five component provides a horizontal layout design for pricing displays. Features a 2-column layout with regular plans on the left and a contact card on the right, perfect for showcasing enterprise options.