# Update Plan Dialog URL: /docs/components/update-plan/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. *** title: Update Plan Dialog description: 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. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ```tsx title="src/components/update-plan-dialog-demo.tsx" "use client"; import { UpdatePlanDialog } from "@/components/billingsdk/update-plan-dialog"; import { plans } from "@/lib/billingsdk-config"; export function UpdatePlanDialogDemo() { return (
{ console.log(planId); }} triggerText="Update Plan" />
); } ```
## Installation ```bash npx shadcn@latest add @billingsdk/update-plan-dialog ``` ```bash pnpm dlx shadcn@latest add @billingsdk/update-plan-dialog ``` ```bash yarn dlx shadcn@latest add @billingsdk/update-plan-dialog ``` ```bash bunx shadcn@latest add @billingsdk/update-plan-dialog ``` ```bash npx @billingsdk/cli add update-plan-dialog ``` ```bash pnpm dlx @billingsdk/cli add update-plan-dialog ``` ```bash yarn dlx @billingsdk/cli add update-plan-dialog ``` ```bash bunx @billingsdk/cli add update-plan-dialog ``` ## Usage ```tsx import { UpdatePlanDialog } from "@/components/billingsdk/update-plan-dialog"; import { plans } from "@/lib/billingsdk-config"; ``` ```tsx { // Handle plan change console.log('Plan changed to:', planId); }} title="Choose Your Plan" /> ``` ## Props | Prop | Type | Required | Description | | -------------- | -------------------------- | -------- | ----------------------------------------------------- | | `currentPlan` | `Plan` | ✅ | The user's current plan object | | `plans` | `Plan[]` | ✅ | Array of available plans to choose from | | `triggerText` | `string` | ✅ | Text displayed on the trigger button | | `onPlanChange` | `(planId: string) => void` | ✅ | Callback function when a plan is selected | | `className` | `string` | ❌ | Additional CSS classes for styling | | `title` | `string` | ❌ | Custom title for the dialog (default: "Upgrade Plan") | ## Theming The update plan dialog 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](/docs/theming) page. ## Example ```tsx title="src/components/update-plan-dialog-demo.tsx" "use client"; import { UpdatePlanDialog } from "@/components/billingsdk/update-plan-dialog"; import { plans } from "@/lib/billingsdk-config"; export function UpdatePlanDialogDemo() { return (
{ console.log(planId); }} triggerText="Update Plan" />
); } ```