Visual Effects
Mask Container
Dims its content behind a configurable overlay driven by a show prop.
The MaskContainer component dims the content you put in it behind a configurable overlay. You control the overlay with the show prop, so the masked content stays mounted and interactive state is preserved across toggles.
Usage
Masked Content
Interactive Reveal
<template>
<div class="space-y-4">
<UButton
:label="show ? 'Reveal' : 'Mask'"
@click="show = !show"
/>
<MMaskContainer
:show="show"
icon="i-lucide-eye"
label="Interactive Reveal"
class="relative h-64 rounded-xl border bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800"
>
<div class="flex h-full items-center justify-center">
<span class="text-3xl font-bold text-primary">Masked Content</span>
</div>
</MMaskContainer>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
</script>
Examples
Mask Container
Mask Reveal Effect
Drive the mask with the show prop. The overlay fades and scales itself away, so the content underneath is always in the DOM.
Masked
The content behind is dimmed.
<template>
<div class="space-y-4">
<UButton
:label="show ? 'Hide mask' : 'Show mask'"
@click="show = !show"
/>
<MMaskContainer
:show="show"
class="relative rounded-lg border bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800"
>
<div class="flex h-96 flex-col items-center justify-center gap-4 p-8 text-center">
<h2 class="text-3xl font-bold text-black">
Mask Reveal Effect
</h2>
<p class="max-w-2xl text-lg text-muted">
Drive the mask with the <code>show</code> prop. The overlay fades and scales
itself away, so the content underneath is always in the DOM.
</p>
</div>
<template #mask>
<div class="text-center">
<h2 class="text-5xl font-bold text-white mb-6">
Masked
</h2>
<p class="text-lg text-white/80">
The content behind is dimmed.
</p>
</div>
</template>
</MMaskContainer>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
</script>
Customize
Content
Reveal
Customize
Show
Color
Iconi-lucide-sparkles
LabelReveal
Props
| Prop | Type | Default | Description |
|---|---|---|---|
show | boolean | false | Whether the mask is covering the content. When false the overlay fades out and stops intercepting pointer events. |
color | string | 'rgba(0,0,0,0.5)' | Background colour of the overlay. Any CSS colour value. |
icon | string | '' | Icon name rendered in the default mask content. Requires a label to be visible. |
label | string | '' | Text rendered under the icon in the default mask content. |
class | string | '' | CSS classes to apply to the container. Give it a height, since the overlay is positioned against the container. |
Slots
| Slot | Props | Description |
|---|---|---|
default | slot | The content to mask. Always mounted, regardless of show. |
mask | slot | Content rendered inside the overlay. Falls back to the icon and label props. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.maskContainer in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | relative overflow-hidden |
mask | - | absolute inset-0 z-10 flex items-center justify-center |
content | - | text-center p-6 |
iconWrapper | - | mb-4 |
icon | - | w-12 h-12 mx-auto text-white |
label | - | text-white text-lg font-medium |