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.

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 (
    <div className="flex flex-1 flex-col justify-center text-center p-4 mx-auto min-h-[300px]">
      <UpdatePlanDialog
        currentPlan={plans[1]}
        plans={plans}
        onPlanChange={(planId) => {
          console.log(planId)
        }}
        triggerText="Update Plan"
      />
    </div>
  );
}

Installation

npx shadcn@latest add @billingsdk/update-plan-dialog

pnpm dlx shadcn@latest add @billingsdk/update-plan-dialog

npx shadcn@latest add @billingsdk/update-plan-dialog

npx @billingsdk/cli add update-plan-dialog

pnpm dlx @billingsdk/cli add update-plan-dialog

npx @billingsdk/cli add update-plan-dialog

Usage

import { UpdatePlanDialog } from "@/components/billingsdk/update-plan-dialog";
import { plans } from "@/lib/billingsdk-config";

<UpdatePlanDialog
  currentPlan={plans[0]}
  plans={plans}
  triggerText="Upgrade Plan"
  onPlanChange={(planId) => {
    // 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 page.

Example