> ## 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.
# LockedOverlay
> Blurs a feature the customer cannot use and shows an upgrade prompt over it.
`LockedOverlay` shows a blurred, non-interactive preview of its children with an [`UpgradePrompt`](/sdks/react/components/upgrade-prompt) 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`](/sdks/react/components/feature-gate) 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.
**Light**
**Dark**
**Minimal**
**Neobrutal**
**Nozle**
**Nozle Dark**
## Importing LockedOverlay
```tsx theme={null}
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.
```tsx components/analytics-preview.tsx theme={null}
export function AnalyticsPreview({ locked, openPlans }: { locked: boolean; openPlans: () => void }) {
return (
Advanced analytics
Revenue by cohort, retention curves and exports.
)
}
```
### 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`](/sdks/react/hooks#the-hooks):
```tsx theme={null}
import { useEntitlement } from '@nozle-js/react'
export function CohortReport() {
const { data } = useEntitlement('advanced_analytics')
return (
window.location.assign('/plans')}>
{/* Sample report with placeholder data */}
)
}
```
## Examples
### Locked with a plan name
`upgradePlanName` gives the prompt "Upgrade to \ to access this feature".
```tsx theme={null}
export function LockedAnalytics({ openPlans }: { openPlans: () => void }) {
return (
Advanced analytics
Revenue by cohort, retention curves and exports.
)
}
```
### Your own text
Without `upgradePlanName`, `upgradeText` is the message.
```tsx theme={null}
export function LockedExports({ openPlans }: { openPlans: () => void }) {
return (
)
}
```
## API reference
**locked** `boolean` *required*
`true` blurs the children and shows the prompt; `false` renders the children only.
**children** `ReactNode` *required*
The content to preview.
**upgradePlanName** `string`
Passed to `UpgradePrompt` as `planName`: "Upgrade to \ to access this feature".
**upgradeText** `string`
Passed to `UpgradePrompt` as `text`, used when `upgradePlanName` is not set. Defaults to `UpgradePrompt`'s default, "Upgrade to access this feature".
**onUpgrade** `() =\> void`
Fires when "Upgrade" is clicked. Defaults to opening `/upgrade`.
**appearance** `Appearance`
Theme, variables and element overrides on top of the provider's, also passed to the prompt. See [Appearance](/sdks/react/styling).
### 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](/sdks/react/styling#elements).
## Related
> **[UpgradePrompt](/sdks/react/components/upgrade-prompt)**
>
> The prompt on its own.
> **[FeatureGate](/sdks/react/components/feature-gate)**
>
> Hide the feature instead of blurring it.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.