# Limited Offer Dialog
URL: /docs/components/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.

***

title: Limited Offer Dialog
description: 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.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

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

    import { LimitedOfferDialog } from "@/components/billingsdk/limited-offer-dialog";

    // Sample offer data
    const sampleOffer = {
      id: "limited-offer-dialog",
      title: "Special Offer",
      description: "Limited time deal",
      discount: "50% OFF",
      features: [
        { name: "50% off your first month" },
        { name: "Valid until December 31, 2024" },
        { name: "First 100 users only" },
      ],
    };

    export function LimitedOfferDialogDemo() {
      const handleClaimOffer = async (offerId: string) => {
        console.log("Claiming offer:", offerId);
        // Simulate API call
        await new Promise((resolve) => setTimeout(resolve, 1000));
        alert("Offer claimed successfully!");
      };

      const handleDeclineOffer = async (offerId: string) => {
        console.log("Declining offer:", offerId);
        // Simulate API call
        await new Promise((resolve) => setTimeout(resolve, 500));
        alert("Offer declined. You can always come back later!");
      };

      const handleDialogClose = () => {
        console.log("Dialog closed");
      };

      return (
        <div className="mx-auto flex min-h-[300px] flex-1 flex-col justify-center p-4 text-center">
          <LimitedOfferDialog
            title="🔥 Limited Time Offer!"
            description="Grab this deal before it's gone"
            offer={sampleOffer}
            triggerButtonText="Open Offer Dialog"
            warningTitle="Don't miss out!"
            warningText="This exclusive offer won't last long. Claim it now before it's gone forever."
            claimButtonText="👉 Claim Offer Now"
            declineButtonText="No thanks, I'll pay full price"
            onClaimOffer={handleClaimOffer}
            onDeclineOffer={handleDeclineOffer}
            onDialogClose={handleDialogClose}
            className="w-auto"
          />
        </div>
      );
    }

    ```
  </Tab>
</Tabs>

## Installation

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

      <Tab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @billingsdk/limited-offer-dialog
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @billingsdk/limited-offer-dialog
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx shadcn@latest add @billingsdk/limited-offer-dialog
        ```
      </Tab>
    </Tabs>
  </Tab>

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

      <Tab value="pnpm">
        ```bash
        pnpm dlx @billingsdk/cli add limited-offer-dialog
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx @billingsdk/cli add limited-offer-dialog
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx @billingsdk/cli add limited-offer-dialog
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Usage

```tsx
import { LimitedOfferDialog } from "@/components/billingsdk/limited-offer-dialog";
```

```tsx
<LimitedOfferDialog
  title="🔥 Limited Time Offer!"
  description="Grab this deal before it's gone"
  offer={{
    id: "limited-offer-dialog",
    title: "Special Offer",
    description: "Limited time deal",
    discount: "50% OFF",
    features: [
      { name: "50% off your first month" },
      { name: "Valid until December 31, 2024" },
      { name: "First 100 users only" }
    ]
  }}
  triggerButtonText="Open Offer Dialog"
  warningTitle="Don't miss out!"
  warningText="This exclusive offer won't last long. Claim it now before it's gone forever."
  claimButtonText="👉 Claim Offer Now"
  declineButtonText="No thanks, I'll pay full price"
  onClaimOffer={async (offerId) => {
    console.log("Claiming offer:", offerId);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000));
    alert("Offer claimed successfully!");
  }}
  onDeclineOffer={async (offerId) => {
    console.log("Declining offer:", offerId);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 500));
    alert("Offer declined. You can always come back later!");
  }}
  onDialogClose={() => {
    // Handle dialog close
    console.log("Dialog closed");
  }}
/>
```

## Props

| Prop                | Type                                         | Required | Description                                                                                                    |
| ------------------- | -------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
| `title`             | `string`                                     | ❌        | Main dialog title (default: "🔥 Limited Time Offer!")                                                          |
| `description`       | `string`                                     | ❌        | Dialog description text (default: "Grab this deal before it's gone")                                           |
| `offer`             | `Offer`                                      | ❌        | Offer object containing offer details (uses defaultOffer if not provided)                                      |
| `triggerButtonText` | `string`                                     | ❌        | Text for the trigger button (default: "Open Offer Dialog")                                                     |
| `warningTitle`      | `string`                                     | ❌        | Title for warning section (default: "Don't miss out!")                                                         |
| `warningText`       | `string`                                     | ❌        | Warning message text (default: "This exclusive offer won't last long. Claim it now before it's gone forever.") |
| `claimButtonText`   | `string`                                     | ❌        | Text for claim offer button (default: "👉 Claim Offer Now")                                                    |
| `declineButtonText` | `string`                                     | ❌        | Text for decline button (default: "No thanks, I'll pay full price")                                            |
| `onClaimOffer`      | `(offerId: string) => Promise<void> \| void` | ❌        | Callback when offer is claimed                                                                                 |
| `onDeclineOffer`    | `(offerId: string) => Promise<void> \| void` | ❌        | Callback when offer is declined                                                                                |
| `onDialogClose`     | `() => void`                                 | ❌        | Callback when dialog is closed                                                                                 |
| `className`         | `string`                                     | ❌        | Additional CSS classes                                                                                         |

## Offer Interface

```tsx
interface Offer {
  id: string;
  title: string;
  description: string;
  discount: string;
  features: Array<{
    name: string;
    icon?: string;
    iconColor?: string;
  }>;
}
```

## Theming

The limited offer 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/limited-offer-dialog-demo.tsx"
"use client";

import { LimitedOfferDialog } from "@/components/billingsdk/limited-offer-dialog";

// Sample offer data
const sampleOffer = {
  id: "limited-offer-dialog",
  title: "Special Offer",
  description: "Limited time deal",
  discount: "50% OFF",
  features: [
    { name: "50% off your first month" },
    { name: "Valid until December 31, 2024" },
    { name: "First 100 users only" },
  ],
};

export function LimitedOfferDialogDemo() {
  const handleClaimOffer = async (offerId: string) => {
    console.log("Claiming offer:", offerId);
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000));
    alert("Offer claimed successfully!");
  };

  const handleDeclineOffer = async (offerId: string) => {
    console.log("Declining offer:", offerId);
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 500));
    alert("Offer declined. You can always come back later!");
  };

  const handleDialogClose = () => {
    console.log("Dialog closed");
  };

  return (
    <div className="mx-auto flex min-h-[300px] flex-1 flex-col justify-center p-4 text-center">
      <LimitedOfferDialog
        title="🔥 Limited Time Offer!"
        description="Grab this deal before it's gone"
        offer={sampleOffer}
        triggerButtonText="Open Offer Dialog"
        warningTitle="Don't miss out!"
        warningText="This exclusive offer won't last long. Claim it now before it's gone forever."
        claimButtonText="👉 Claim Offer Now"
        declineButtonText="No thanks, I'll pay full price"
        onClaimOffer={handleClaimOffer}
        onDeclineOffer={handleDeclineOffer}
        onDialogClose={handleDialogClose}
        className="w-auto"
      />
    </div>
  );
}

```

### Credits

* Created by [@rajoninternet](https://x.com/rajoninternet)