Pricing TablesPricing Table One
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.
Classic Theme
Pricing
Choose the plan that's right for you
Starter
$0
per month
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
Most Popular
Pro$20
per month
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
Enterprise
Custom
per month
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
"use client"
import { PricingTableOne } from "@/components/billingsdk/pricing-table-one"
import { plans } from "@/lib/billingsdk-config"
export function PricingTableOneDemo() {
return <>
<PricingTableOne plans={plans}
title="Pricing"
description="Choose the plan that's right for you"
onPlanSelect={(planId) => console.log('Selected plan:', planId)}
size="medium" // small, medium, large
theme="classic" // minimal or classic
className="w-full"
/>
</>
}Minimal Theme
Pricing
Choose the plan that's right for you
Starter
$0
per month
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
Pro
$20
per month
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
Enterprise
Custom
per month
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
"use client"
import { PricingTableOne } from "@/components/billingsdk/pricing-table-one"
import { plans } from "@/lib/billingsdk-config"
export function PricingTableOneMinimalDemo() {
return <>
<PricingTableOne plans={plans}
title="Pricing"
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
className="w-full"
/>
</>
}Installation
npx shadcn@latest add @billingsdk/pricing-table-onepnpm dlx shadcn@latest add @billingsdk/pricing-table-onenpx shadcn@latest add @billingsdk/pricing-table-onenpx @billingsdk/cli add pricing-table-onepnpm dlx @billingsdk/cli add pricing-table-onenpx @billingsdk/cli add pricing-table-oneUsage
import { PricingTableOne } from "@/components/billingsdk/pricing-table-one";
import { plans } from "@/lib/billingsdk-config";<PricingTableOne
plans={plans}
title="Pricing"
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
/>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 |
size | "small" | "medium" | "large" | Size variant of the pricing table |
theme | "minimal" | "classic" | Theme 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 { PricingTableOne } from "@/components/billingsdk/pricing-table-one"
import { plans } from "@/lib/billingsdk-config"
export function PricingTableOneDemo() {
return <>
<PricingTableOne plans={plans}
title="Pricing"
description="Choose the plan that's right for you"
onPlanSelect={(planId) => console.log('Selected plan:', planId)}
size="medium" // small, medium, large
theme="classic" // minimal or classic
className="w-full"
/>
</>
}