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.
Starter
For developers testing out Liveblocks locally.
Per month
Pro
For companies adding collaboration in production.
Per month
Enterprise
For organizations that need more support and compliance features.
Per month
Pre-negotiated discounts are available to early-stage startups and nonprofits.
"use client"
import { PricingTableThree } from "@/components/billingsdk/pricing-table-three"
import { plans } from "@/lib/billingsdk-config"
export function PricingTableThreeDemo() {
return (
<PricingTableThree
plans={plans}
onPlanSelect={(planId) => console.log("Selected plan:", planId)}
className={"w-full max-w-4xl mx-auto"}
variant="small"
showFooter={true}
footerText="Pre-negotiated discounts are available to early-stage startups and nonprofits."
footerButtonText="Apply now"
onFooterButtonClick={() => console.log("Footer button clicked")}
/>
)
}Installation
npx shadcn@latest add @billingsdk/pricing-table-threepnpm dlx shadcn@latest add @billingsdk/pricing-table-threeyarn dlx shadcn@latest add @billingsdk/pricing-table-threebunx shadcn@latest add @billingsdk/pricing-table-threenpx @billingsdk/cli add pricing-table-threepnpm dlx @billingsdk/cli add pricing-table-threeyarn dlx @billingsdk/cli add pricing-table-threebunx @billingsdk/cli add pricing-table-threeUsage
import { PricingTableThree } from "@/components/billingsdk/pricing-table-three";
import { plans } from "@/lib/billingsdk-config";
<PricingTableThree
plans={plans}
title="Pricing Plans"
description="Find the right plan for your business"
onPlanSelect={(planId) => console.log('Selected plan:', planId)}
/>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 { PricingTableThree } from "@/components/billingsdk/pricing-table-three"
import { plans } from "@/lib/billingsdk-config"
export function PricingTableThreeDemo() {
return (
<PricingTableThree
plans={plans}
onPlanSelect={(planId) => console.log("Selected plan:", planId)}
className={"w-full max-w-4xl mx-auto"}
variant="small"
showFooter={true}
footerText="Pre-negotiated discounts are available to early-stage startups and nonprofits."
footerButtonText="Apply now"
onFooterButtonClick={() => console.log("Footer button clicked")}
/>
)
}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.
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.