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.
Classic Theme
Budget-friendly pricing alternatives
Get started free or upgrade to share your impact for all completed tasks with multiple people
Enterprise
For organizations that need more support and compliance features.
Custom pricing and solutions available
"use client"
import { PricingTableFive } from "@/components/billingsdk/pricing-table-five"
import { plans } from "@/lib/billingsdk-config"
export function PricingTableFiveDemo() {
return (
<PricingTableFive
plans={plans}
theme="classic"
onPlanSelect={(planId: string) => console.log("Selected plan:", planId)}
title="Budget-friendly pricing alternatives"
description="Get started free or upgrade to share your impact for all completed tasks with multiple people"
/>
)
}Minimal Theme
Budget-friendly pricing alternatives
Get started free or upgrade to share your impact for all completed tasks with multiple people
Enterprise
For organizations that need more support and compliance features.
Custom pricing and solutions available
'use client'
import { PricingTableFive } from '@/components/billingsdk/pricing-table-five';
import { plans } from '@/lib/billingsdk-config';
export function PricingTableFiveMinimalDemo() {
return (
<PricingTableFive
plans={plans}
theme="minimal"
onPlanSelect={(planId: string) => console.log('Selected plan:', planId)}
title="Budget-friendly pricing alternatives"
description="Get started free or upgrade to share your impact for all completed tasks with multiple people"
/>
);
}Installation
npx shadcn@latest add @billingsdk/pricing-table-fivepnpm dlx shadcn@latest add @billingsdk/pricing-table-fiveyarn dlx shadcn@latest add @billingsdk/pricing-table-fivebunx shadcn@latest add @billingsdk/pricing-table-fivenpx @billingsdk/cli add pricing-table-fivepnpm dlx @billingsdk/cli add pricing-table-fiveyarn dlx @billingsdk/cli add pricing-table-fivebunx @billingsdk/cli add pricing-table-fiveUsage
import { PricingTableFive } from "@/components/billingsdk/pricing-table-five";
import { plans } from "@/lib/billingsdk-config";<PricingTableFive
plans={plans}
title="Budget-friendly pricing alternatives"
description="Get started free or upgrade to share your impact for all completed tasks with multiple people"
onPlanSelect={(planId) => console.log('Selected plan:', planId)}
size="medium" // 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 |
Features
- Dual Theme Support: Choose between minimal and classic themes
- Horizontal Layout: Regular plans displayed horizontally with features in a grid
- Contact Card: Dedicated section for enterprise/custom plans
- Responsive Layout: Adapts beautifully from desktop to mobile
- 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
"use client"
import { PricingTableFive } from "@/components/billingsdk/pricing-table-five"
import { plans } from "@/lib/billingsdk-config"
export function PricingTableFiveDemo() {
return (
<PricingTableFive
plans={plans}
theme="classic"
onPlanSelect={(planId: string) => console.log("Selected plan:", planId)}
title="Budget-friendly pricing alternatives"
description="Get started free or upgrade to share your impact for all completed tasks with multiple people"
/>
)
}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.
Pricing Table Six
The Pricing Table Six component provides a modern gradient design for displaying pricing plans. This component features beautiful gradients, smooth animations, and a contemporary card-based layout.