# Manage Subscription
URL: /docs/components/manage-subscription

The Manage Subscription component provides a comprehensive interface for users to view and manage their current subscription details, including plan information, billing details, and actions to update or cancel their subscription.

***

title: Manage Subscription
description: The Manage Subscription component provides a comprehensive interface for users to view and manage their current subscription details, including plan information, billing details, and actions to update or cancel their subscription.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="subscription-management">
      <SubscriptionManagementDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="src/components/subscription-management-demo.tsx"
    "use client";

    import { SubscriptionManagement } from "@/components/billingsdk/subscription-management";
    import { type CurrentPlan, plans } from "@/lib/billingsdk-config";

    export function SubscriptionManagementDemo() {
      const currentPlan: CurrentPlan = {
        plan: plans[1],
        type: "monthly",
        price: "$121",
        nextBillingDate: "January 15, 2025",
        paymentMethod: "Credit Card",
        status: "active",
      };
      return (
        <div className="flex flex-1 flex-col justify-center text-center">
          <SubscriptionManagement
            className="mx-auto max-w-2xl"
            currentPlan={currentPlan}
            updatePlan={{
              currentPlan: currentPlan.plan,
              plans: plans,
              onPlanChange: (planId) => {
                console.log("update plan", planId);
              },
              triggerText: "Update Plan",
            }}
            cancelSubscription={{
              title: "Cancel Subscription",
              description: "Are you sure you want to cancel your subscription?",
              leftPanelImageUrl:
                "https://img.freepik.com/free-vector/abstract-paper-cut-shape-wave-background_474888-4649.jpg?semt=ais_hybrid&w=740&q=80",
              plan: currentPlan.plan,
              warningTitle: "You will lose access to your account",
              warningText:
                "If you cancel your subscription, you will lose access to your account and all your data will be deleted.",
              onCancel: async (planId) => {
                console.log("cancel subscription", planId);
                return new Promise((resolve) => {
                  setTimeout(() => {
                    resolve(void 0);
                  }, 1000);
                });
              },
              onKeepSubscription: async (planId) => {
                console.log("keep subscription", planId);
              },
            }}
          />
        </div>
      );
    }

    ```
  </Tab>
</Tabs>

### Related

* See also: [Invoice History](/docs/components/invoice-history)
* See also: [Payment Success Dialog](/docs/components/payment-success-dialog)

## Installation

<Tabs items={["shadcn", "billingSDK"]} defaultValue="shadcn" className="border-none bg-transparent">
  <Tab value="shadcn" className="mt-3 border-none bg-transparent p-0">
    <Tabs items={["npx", "pnpm", "yarn", "bun"]} defaultValue="npx" groupId="installation-tabs">
      <Tab value="npx">
        ```bash
        npx shadcn@latest add @billingsdk/subscription-management
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @billingsdk/subscription-management
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @billingsdk/subscription-management
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx shadcn@latest add @billingsdk/subscription-management
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab value="billingSDK" className="mt-3 border-none bg-transparent p-0">
    <Tabs items={["npx", "pnpm", "yarn", "bun"]} defaultValue="npx" groupId="billingsdk-cli-tabs">
      <Tab value="npx">
        ```bash
        npx @billingsdk/cli add subscription-management
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx @billingsdk/cli add subscription-management
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx @billingsdk/cli add subscription-management
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx @billingsdk/cli add subscription-management
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Usage

```tsx
import { SubscriptionManagement } from "@/components/billingsdk/subscription-management";
import { type CurrentPlan, plans } from "@/lib/billingsdk-config";

const currentPlan: CurrentPlan = {
  plan: plans[1],
  type: "monthly",
  price: "$121",
  nextBillingDate: "January 15, 2025",
  paymentMethod: "Credit Card",
  status: "active",
};
```

```tsx
<SubscriptionManagement
  className="mx-auto max-w-2xl"
  currentPlan={currentPlan}
  updatePlan={{
    currentPlan: currentPlan.plan,
    plans: plans,
    onPlanChange: (planId) => {
      console.log("update plan", planId);
    },
    triggerText: "Update Plan",
  }}
  cancelSubscription={{
    title: "Cancel Subscription",
    description: "Are you sure you want to cancel your subscription?",
    plan: currentPlan.plan,
    onCancel: async (planId) => {
      // Handle cancellation
      await cancelSubscription(planId);
    },
  }}
/>
```

## Props

| Prop                 | Type                            | Required | Description                                    |
| -------------------- | ------------------------------- | -------- | ---------------------------------------------- |
| `className`          | `string`                        | ❌        | Additional CSS classes for styling             |
| `currentPlan`        | `CurrentPlan`                   | ✅        | Object containing current subscription details |
| `cancelSubscription` | `CancelSubscriptionDialogProps` | ✅        | Props for the cancel subscription dialog       |
| `updatePlan`         | `UpdatePlanDialogProps`         | ✅        | Props for the update plan dialog               |

## CurrentPlan Interface

Refer to the [CurrentPlan Interface](/docs/interfaces#currentplan-interface) for more details.

```tsx
interface CurrentPlan {
  plan: Plan;
  type: "monthly" | "yearly" | "custom";
  price: string;
  nextBillingDate: string;
  paymentMethod: string;
  status: "active" | "inactive" | "cancelled" | "past_due";
}
```

## Theming

The subscription management 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/subscription-management-demo.tsx"
"use client";

import { SubscriptionManagement } from "@/components/billingsdk/subscription-management";
import { type CurrentPlan, plans } from "@/lib/billingsdk-config";

export function SubscriptionManagementDemo() {
  const currentPlan: CurrentPlan = {
    plan: plans[1],
    type: "monthly",
    price: "$121",
    nextBillingDate: "January 15, 2025",
    paymentMethod: "Credit Card",
    status: "active",
  };
  return (
    <div className="flex flex-1 flex-col justify-center text-center">
      <SubscriptionManagement
        className="mx-auto max-w-2xl"
        currentPlan={currentPlan}
        updatePlan={{
          currentPlan: currentPlan.plan,
          plans: plans,
          onPlanChange: (planId) => {
            console.log("update plan", planId);
          },
          triggerText: "Update Plan",
        }}
        cancelSubscription={{
          title: "Cancel Subscription",
          description: "Are you sure you want to cancel your subscription?",
          leftPanelImageUrl:
            "https://img.freepik.com/free-vector/abstract-paper-cut-shape-wave-background_474888-4649.jpg?semt=ais_hybrid&w=740&q=80",
          plan: currentPlan.plan,
          warningTitle: "You will lose access to your account",
          warningText:
            "If you cancel your subscription, you will lose access to your account and all your data will be deleted.",
          onCancel: async (planId) => {
            console.log("cancel subscription", planId);
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve(void 0);
              }, 1000);
            });
          },
          onKeepSubscription: async (planId) => {
            console.log("keep subscription", planId);
          },
        }}
      />
    </div>
  );
}

```