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
For developers testing out Liveblocks locally.
per month
For companies adding collaboration in production.
per month
For organizations that need more support and compliance features.
per month
| Starter | Pro | Enterprise | |
|---|---|---|---|
| Presence | |||
| Comments | |||
| Notifications | |||
| Text Editor | |||
| Sync Datastore |
"use client";
import { plans } from "@/lib/billingsdk-config";
import { PricingTableTwo } from "@/components/billingsdk/pricing-table-two";
export function PricingTableTwoDemo() {
return (
<PricingTableTwo
plans={plans}
className="mx-auto w-full max-w-4xl"
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
For developers testing out Liveblocks locally.
per month
For companies adding collaboration in production.
per month
For organizations that need more support and compliance features.
per month
| Starter | Pro | Enterprise | |
|---|---|---|---|
| Presence | |||
| Comments | |||
| Notifications | |||
| Text Editor | |||
| Sync Datastore |
"use client";
import { plans } from "@/lib/billingsdk-config";
import { PricingTableTwo } from "@/components/billingsdk/pricing-table-two";
export function PricingTableTwoMinimalDemo() {
return (
<>
<PricingTableTwo
plans={plans}
className="mx-auto w-full max-w-4xl"
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-twopnpm dlx shadcn@latest add @billingsdk/pricing-table-twoyarn dlx shadcn@latest add @billingsdk/pricing-table-twobunx shadcn@latest add @billingsdk/pricing-table-twonpx @billingsdk/cli add pricing-table-twopnpm dlx @billingsdk/cli add pricing-table-twoyarn dlx @billingsdk/cli add pricing-table-twobunx @billingsdk/cli add pricing-table-twoUsage
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
| Prop | Type | Description |
|---|---|---|
plans | Plan[] | Array of pricing plans (see Plan interface) |
title | string | Main title for the pricing section |
description | string | Subtitle description |
onPlanSelect | (planId: string) => void | Callback 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
"use client";
import { plans } from "@/lib/billingsdk-config";
import { PricingTableTwo } from "@/components/billingsdk/pricing-table-two";
export function PricingTableTwoDemo() {
return (
<PricingTableTwo
plans={plans}
className="mx-auto w-full max-w-4xl"
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.