[[shadcn-vue]]にはオーバーレイコンポーネントは存在しないため自作する。
```html
<script setup lang="ts">
const value = defineModel<boolean>();
</script>
<template>
<transition name="fade">
<div
v-if="value"
class="fixed inset-0 bg-black bg-opacity-50 z-50 grid place-items-center transition-opacity ease-in duration-700 fade-item"
>
<slot></slot>
</div>
</transition>
</template>
<style scoped>
.fade-item {
transition: all 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
opacity: 1;
}
</style>
```
> [!hint]
> フェード効果が不要なら `<transition>` タグと `<style>` タグは不要。`fade-item`クラス指定も。
以下はローディングオーバーレイの実装例。
```html
<script setup lang="ts">
import { ref } from "vue";
import Overlay from "./components/Overlay.vue";
const overlay = ref(false);
</script>
<template>
<div class="grid place-items-center h-svh">
<button
class="rounded-md p-2 bg-cyan-600 text-white font-bold hover:opacity-75 hover:shadow transition duration-300"
@click="overlay = true"
>
show overlay
</button>
</div>
<Overlay v-model="overlay">
<div class="grid place-items-center gap-6">
<div
class="w-16 h-16 border-4 border-t-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"
></div>
<div
class="text-4xl font-bold text-white"
style="text-shadow: 1px 1px 3px rgb(36 37 47 / 25%)"
>
LOADING...
</div>
<button
class="rounded-md p-2 bg-gray-600 text-white font-bold hover:opacity-75 hover:shadow transition duration-300"
@click="overlay = false"
>
hide overlay
</button>
</div>
</Overlay>
</template>
```