Dialog
dialog.svelteA modal dialog built on bits-ui with accessible focus management and backdrop.
Demo
Usage
001 <script lang="ts">
002 import * as Dialog from '$lib/components/dialog/index.js';
003 </script>
004
005 <div>
006 <Dialog.Root>
007 <Dialog.Trigger>Open Dialog</Dialog.Trigger>
008 <Dialog.Portal>
009 <Dialog.Overlay />
010 <Dialog.Content>
011 <Dialog.Title>System Notice</Dialog.Title>
012 <Dialog.Description>
013 This is a terminal-aesthetic dialog built with bits-ui primitives.
014 </Dialog.Description>
015 <div class="flex justify-end gap-2">
016 <Dialog.Close>Close</Dialog.Close>
017 </div>
018 </Dialog.Content>
019 </Dialog.Portal>
020 </Dialog.Root>
021 </div>
022
dialog.svelte
001 <script lang="ts" module>
002 import type { DialogRootProps as BitsDialogRootProps } from 'bits-ui';
003
004 export type DialogRootProps = BitsDialogRootProps;
005 </script>
006
007 <script lang="ts">
008 import { Dialog } from 'bits-ui';
009
010 let { children, ...restProps }: DialogRootProps = $props();
011 </script>
012
013 <Dialog.Root {...restProps}>
014 {@render children?.()}
015 </Dialog.Root>
016