LockedOverlay

LockedOverlay shows a blurred, non-interactive preview of its children with an UpgradePrompt on top. When to use

A dashboard widget or report that a higher plan unlocks, so customers see what they would get.
A settings panel available on another plan.
Instead of FeatureGate when you want to show the feature blurred rather than hide it.

The blurred content is still in the page. Do not put data the customer must not see inside it, and enforce access on your server.

LockedOverlay over a blurred analytics card, with Upgrade to Scale to access this feature and an Upgrade button, light theme

Importing LockedOverlay

import {
  LockedOverlay,
  type LockedOverlayProps,
} from '@nozle-js/react'

Rendering LockedOverlay

Wrap the content and pass locked. When locked is false the children render as they are, with no wrapper at all.

components/analytics-preview.tsx

export function AnalyticsPreview({ locked, openPlans }: { locked: boolean; openPlans: () => void }) {
  return (
    <LockedOverlay locked={locked} upgradePlanName="Scale" onUpgrade={openPlans}>
      <div style={{ padding: 24 }}>
        <strong>Advanced analytics</strong>
        <p>Revenue by cohort, retention curves and exports.</p>
      </div>
    </LockedOverlay>
  )
}

What locking does

The children get a 4px blur, with clicks, selection and screen readers kept out of them.
A panel covers the content in the theme’s background colour, with the upgrade message and button.
The panel is a role="dialog" labelled “Feature locked — upgrade required”.
The root is an inline-block, sized by its children.

Data

The overlay needs one boolean, locked.

Live data

Lock it from the customer’s entitlement with useEntitlement:

import { useEntitlement } from '@nozle-js/react'

export function CohortReport() {
  const { data } = useEntitlement('advanced_analytics')
  return (
    <LockedOverlay locked={!data?.allowed} upgradePlanName="Scale" onUpgrade={() => window.location.assign('/plans')}>
      <section>{/* Sample report with placeholder data */}</section>
    </LockedOverlay>
  )
}

Examples

Locked with a plan name

upgradePlanName gives the prompt “Upgrade to <plan> to access this feature”.

export function LockedAnalytics({ openPlans }: { openPlans: () => void }) {
  return (
    <LockedOverlay locked upgradePlanName="Scale" onUpgrade={openPlans}>
      <div style={{ padding: 24 }}>
        <strong>Advanced analytics</strong>
        <p>Revenue by cohort, retention curves and exports.</p>
      </div>
    </LockedOverlay>
  )
}

Your own text

Without upgradePlanName, upgradeText is the message.

export function LockedExports({ openPlans }: { openPlans: () => void }) {
  return (
    <LockedOverlay locked upgradeText="Exports are part of the Pro plan" onUpgrade={openPlans}>
      <button type="button">Export CSV</button>
    </LockedOverlay>
  )
}

API reference

boolean

required

true blurs the children and shows the prompt; false renders the children only.

ReactNode

required

The content to preview.

string

Passed to UpgradePrompt as planName: “Upgrade to <plan> to access this feature”.

string

Passed to UpgradePrompt as text, used when upgradePlanName is not set. Defaults to UpgradePrompt’s default, “Upgrade to access this feature”.

() => void

Fires when “Upgrade” is clicked. Defaults to opening /upgrade.

Appearance

Theme, variables and element overrides on top of the provider’s, also passed to the prompt. See Appearance.

States

State	What shows
`locked` is true	The blurred children with the upgrade panel on top.
`locked` is false	The children only, with no wrapper.

Appearance

Element keys

lockedOverlay (root), lockedOverlay__panel, and upgradePrompt for the prompt.Style them with appearance.elements. See Elements.

UpgradePrompt

The prompt on its own.

FeatureGate

Hide the feature instead of blurring it.

Setup

Components

Billing

Entitlements

LockedOverlay

Importing LockedOverlay

Rendering LockedOverlay

What locking does

Data

Live data

Examples

Locked with a plan name

Your own text

API reference

States

Appearance

UpgradePrompt

FeatureGate

​Importing LockedOverlay

​Rendering LockedOverlay

​What locking does

​Data

​Live data

​Examples

​Locked with a plan name

​Your own text

​API reference

​States

​Appearance

​Related

UpgradePrompt

FeatureGate

Importing LockedOverlay

Rendering LockedOverlay

What locking does

Data

Live data

Examples

Locked with a plan name

Your own text

API reference

States

Appearance

Related