> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nozle.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# UpgradePrompt

> A short upgrade message with an Upgrade button, for gate fallbacks and locked features.

`UpgradePrompt` shows a centered message and an "Upgrade" button.

**When to use**

* As `fallback` of [`FeatureGate`](/sdks/react/components/feature-gate), [`PlanGate`](/sdks/react/components/plan-gate) or [`UsageGate`](/sdks/react/components/usage-gate).
* In an empty state of a feature the customer's plan does not include.
* Over blurred content: it is the panel of [`LockedOverlay`](/sdks/react/components/locked-overlay).

**Light**

![UpgradePrompt reading Upgrade to Pro to access this feature, with an Upgrade button, light theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/upgrade-prompt/light.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=08f84b240c186a7c27820f588d34afc0)

**Dark**

![UpgradePrompt reading Upgrade to Pro to access this feature, with an Upgrade button, dark theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/upgrade-prompt/dark.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=3c097f911af9181db485cca772d84596)

**Minimal**

![UpgradePrompt reading Upgrade to Pro to access this feature, with an Upgrade button, minimal theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/upgrade-prompt/minimal.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=d669ff5e88fc35d0eac9a3230750069e)

**Neobrutal**

![UpgradePrompt reading Upgrade to Pro to access this feature, with an Upgrade button, neobrutal theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/upgrade-prompt/neobrutal.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=cd4ae5a51185f8ec19de427852080a4f)

**Nozle**

![UpgradePrompt reading Upgrade to Pro to access this feature, with an Upgrade button, nozle theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/upgrade-prompt/nozle.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=b3b93eb8226b2325c014dd4b5503a432)

**Nozle Dark**

![UpgradePrompt reading Upgrade to Pro to access this feature, with an Upgrade button, nozleDark theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/upgrade-prompt/nozle-dark.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=7ff8ab04395ea30c8bb1cd882547b662)

## Importing UpgradePrompt

```tsx theme={null}
import {
  UpgradePrompt,
  type UpgradePromptProps,
} from '@nozle-js/react'
```

## Rendering UpgradePrompt

Pass a plan name and open your plans from `onUpgrade`. The prompt fetches nothing and shows what you pass.

```tsx components/sso-upsell.tsx theme={null}
export function SsoUpsell({ openPlans }: { openPlans: () => void }) {
  return <UpgradePrompt planName="Pro" onUpgrade={openPlans} />
}
```

### What a click does

With `onUpgrade`, a click calls it and nothing else. Without it, the button sets `window.location.href` to `/upgrade`.

## Examples

### Plan name

`planName` shows "Upgrade to \<planName> to access this feature".

![UpgradePrompt reading Upgrade to Pro to access this feature, with an Upgrade button, light theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/upgrade-prompt/light.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=08f84b240c186a7c27820f588d34afc0)

```tsx theme={null}
export function ProPrompt({ openPlans }: { openPlans: () => void }) {
  return <UpgradePrompt planName="Pro" onUpgrade={openPlans} />
}
```

### Your own text

Without `planName`, `text` is the message.

```tsx theme={null}
export function LimitPrompt({ openPlans }: { openPlans: () => void }) {
  return <UpgradePrompt text="You used all 1,000 API calls this month" onUpgrade={openPlans} />
}
```

### Open an upgrade modal

Open your plan change flow from `onUpgrade`, for example an [`UpgradeModal`](/sdks/react/components/upgrade-modal):

```tsx theme={null}
import { useState } from 'react'
import { UpgradeModal } from '@nozle-js/react'

export function UpgradeToScale() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <UpgradePrompt planName="Scale" onUpgrade={() => setOpen(true)} />
      <UpgradeModal isOpen={open} planCode="scale" onCancel={() => setOpen(false)} onCompleted={() => setOpen(false)} />
    </>
  )
}
```

## API reference

**planName** `string`

Shows "Upgrade to \<planName> to access this feature". Takes priority over `text`.

**text** `string` (default: Upgrade to access this feature)

The message when `planName` is not set.

**onUpgrade** `() =\> void`

Fires when "Upgrade" is clicked. Defaults to opening `/upgrade`: without it the button sets `window.location.href` to `/upgrade`.

**appearance** `Appearance`

Theme, variables and element overrides on top of the provider's. See [Appearance](/sdks/react/styling).

### States

`UpgradePrompt` has one state: the message and the "Upgrade" button.

### Appearance

> **Element keys**
>
> `upgradePrompt` (root).
>
> Style them with `appearance.elements`. See [Elements](/sdks/react/styling#elements).

## Related

> **[LockedOverlay](/sdks/react/components/locked-overlay)**
>
> This prompt over blurred content.

> **[FeatureGate](/sdks/react/components/feature-gate)**
>
> Shows it when a feature is not included.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.