Update Plan Card
The Update Plan Card component provides a compact, card-based interface for users to upgrade or change their subscription plan. It's perfect for embedding in dashboards or sidebars where space is limited.
For developers testing out Liveblocks locally.
For companies adding collaboration in production.
For organizations that need more support and compliance features.
'use client'
import { UpdatePlanCard } from '@/components/billingsdk/update-plan-card';
import { plans } from '@/lib/billingsdk-config';
export function UpdatePlanCardDemo() {
return (
<main className="flex flex-1 flex-col justify-center text-center w-full">
<UpdatePlanCard
currentPlan={plans[0]}
plans={plans}
onPlanChange={(planId) => {
console.log("Upgrade plan to", planId)
}}
/>
</main>
);
}Installation
npx shadcn@latest add @billingsdk/update-plan-cardpnpm dlx shadcn@latest add @billingsdk/update-plan-cardnpx shadcn@latest add @billingsdk/update-plan-cardnpx @billingsdk/cli add update-plan-cardpnpm dlx @billingsdk/cli add update-plan-cardnpx @billingsdk/cli add update-plan-cardUsage
import { UpdatePlanCard } from "@/components/billingsdk/update-plan-card";
import { plans } from "@/lib/billingsdk-config";<UpdatePlanCard
currentPlan={plans[0]}
plans={plans}
onPlanChange={(planId) => {
// Handle plan change
console.log('Plan changed to:', planId);
}}
title="Upgrade Your Plan"
/>Props
| Prop | Type | Required | Description |
|---|---|---|---|
currentPlan | Plan | ✅ | The user's current plan object |
plans | Plan[] | ✅ | Array of available plans to choose from |
onPlanChange | (planId: string) => void | ✅ | Callback function when a plan is selected |
className | string | ❌ | Additional CSS classes for styling |
title | string | ❌ | Custom title for the card (default: "Upgrade Plan") |
Theming
The update plan card 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 { UpdatePlanCard } from '@/components/billingsdk/update-plan-card';
import { plans } from '@/lib/billingsdk-config';
export function UpdatePlanCardDemo() {
return (
<main className="flex flex-1 flex-col justify-center text-center w-full">
<UpdatePlanCard
currentPlan={plans[0]}
plans={plans}
onPlanChange={(planId) => {
console.log("Upgrade plan to", planId)
}}
/>
</main>
);
}Usage Table
Per-model LLM usage with token counts, cache reads, and API cost.
Update Plan Dialog
The Update Plan Dialog component provides an interactive interface for users to upgrade or change their subscription plan. It features plan comparison, monthly/yearly toggle, and smooth animations for a seamless user experience.