Dialog

Overlay

Modal dialog with 15 animation variants. Portal-based, accessible, and keyboard-dismissible.

Import

ts 
import Dialog from '$lib/components/Dialog.svelte';

Usage

svelte 
<script lang="ts">
  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Open Dialog</Button>

<Dialog {open} onClose={() => (open = false)} variant="elastic">
  <h3>Dialog Title</h3>
  <p>Dialog content goes here.</p>
  <div>
    <Button onclick={() => (open = false)}>Close</Button>
  </div>
</Dialog>

Animations

Each button opens a dialog with a different entrance animation. Try them all.

Use Cases

Real-world dialog patterns: confirmation, form, and fullscreen.

API Reference

PropTypeDefaultDescription
open boolean—Controls whether the dialog is visible.
onClose () => void—Callback fired when the backdrop is clicked or Escape is pressed.
variant Variant'center'Animation variant. One of: center, elastic, flip, rotate, zoom, slide-left, slide-right, fade-up, newspaper, swing, morph, alert, bottom-sheet, shrink, dropdown, fullscreen.
children Snippet—Content rendered inside the dialog panel.