GatedContent
Svelte 5 component that blurs content behind a lock overlay when a permission check fails. Use it to visually gate sections of a page while keeping server-side validation as the real enforcement.
Usage
<!-- Use type to supply title/description from an object -->
<GatedContent locked={!allowed} type={myGateTypes.someKey}>
<!-- gated content here -->
</GatedContent>
<!-- Or pass strings directly -->
<GatedContent locked={!allowed} title='Feature Locked' description='Contact support to enable this.'>
<!-- gated content here -->
</GatedContent>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
locked | boolean | — | Whether to show the lock overlay and blur content |
type | { title: string; description: string } | — | Object providing default title/description |
title | string | From type or 'Permission Required' | Overlay heading |
description | string | From type or 'You do not have permission...' | Overlay body text |
children | Snippet | — | Content to gate |
When locked is false, children render normally with no wrapper styles. The title and description props override the type defaults when provided.