Pricing Table Four
The Pricing Table Four component provides a modern gradient design for displaying pricing plans. This component features beautiful gradients, smooth animations, and a contemporary card-based layout.
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.
Features:
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
Pro
For companies adding collaboration in production.
Features:
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
Enterprise
For organizations that need more support and compliance features.
Features:
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
"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"
description="Transform your project with our comprehensive pricing options designed for every need."
onPlanSelect={(planId: string) => console.log('Selected plan:', planId)}
size="medium"
className="w-full"
/>
)
}Installation
npx shadcn@latest add @billingsdk/pricing-table-fourpnpm dlx shadcn@latest add @billingsdk/pricing-table-fournpx shadcn@latest add @billingsdk/pricing-table-fourUsage
import { PricingTableFour } from "@/components/billingsdk/pricing-table-four";
import { plans } from "@/lib/billingsdk-config";
<PricingTableFour
plans={plans}
title="Choose Your Plan"
description="Select the perfect plan for your needs. Upgrade or downgrade anytime."
onPlanSelect={(planId) => console.log('Selected plan:', planId)}
size="medium"
/>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 |
Features
- 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
- Customizable Sizing: Small, medium, and large size variants
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 { 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"
description="Transform your project with our comprehensive pricing options designed for every need."
onPlanSelect={(planId: string) => console.log('Selected plan:', planId)}
size="medium"
className="w-full"
/>
)
}Credits
- Created by @KissuChaudhary
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.
Manage Subscription
The Manage Subscription component provides a comprehensive interface for users to view and manage their current subscription details, including plan information, billing details, and actions to update or cancel their subscription.