This is a simple resuable modal component. It comes standard with a close button and backdrop. You can also click outside the modal to close it.

The component is made using the DaisyUI modal component: https://daisyui.com/components/modal

​
Usage

+page.svelte
<script lang="ts">
    import Modal from '$lib/ui/components/Modal.svelte';
	let dialog: HTMLDialogElement;
</script>

<button type="button" on:click={() => dialog.showModal()}>Open modal</button>

<Modal bind:dialog={dialog}>.
    <!-- Modal content -->
    <h1>Modal</h1>
    <p>This is a modal.</p>
</Modal>

Located at src/lib/ui/components/Modal.svelte.

You can customize it to your needs.

DropdownThemeController