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 w-full flex-1 flex-col justify-center text-center">
<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-cardyarn dlx shadcn@latest add @billingsdk/update-plan-cardbunx shadcn@latest add @billingsdk/update-plan-cardnpx @billingsdk/cli add update-plan-cardpnpm dlx @billingsdk/cli add update-plan-cardyarn dlx @billingsdk/cli add update-plan-cardbunx @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 w-full flex-1 flex-col justify-center text-center">
<UpdatePlanCard
currentPlan={plans[0]}
plans={plans}
onPlanChange={(planId) => {
console.log("Upgrade plan to", planId);
}}
/>
</main>
);
}Limited Offer Dialog
The Limited Offer Dialog component provides a compelling interface for displaying time-sensitive offers and promotions. It features customizable content, loading states, error handling, and smooth animations to maximize conversion rates.
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.