Dialog

Modal surface on bits-ui Dialog. Opens with a fade-and-zoom tokenized to 100ms, traps focus while visible, restores the trigger on Esc or outside click.

API Reference Component Source

Usage

dialog.svelte

<script lang="ts">
	import { Dialog as DialogPrimitive } from 'bits-ui';

	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
</script>

<DialogPrimitive.Root
	bind:open
	{...restProps}
	{...{ 'data-slot': 'dialog' } as Record<string, unknown>}
/>

Without close button

dialog-no-close.svelte

<script lang="ts">
	import { Dialog as DialogPrimitive } from 'bits-ui';

	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
</script>

<DialogPrimitive.Root
	bind:open
	{...restProps}
	{...{ 'data-slot': 'dialog' } as Record<string, unknown>}
/>

Scrollable

Wrap long content in ScrollArea with a max-height — the header and footer stay pinned while the body scrolls.

dialog-scrollable.svelte

<Dialog.Content>
	<Dialog.Header>...</Dialog.Header>
	<ScrollArea class="max-h-72 pr-3">
		<!-- long content -->
	</ScrollArea>
	<Dialog.Footer>...</Dialog.Footer>
</Dialog.Content>

Nested dialog

Open a second dialog from inside the first — bits-ui stacks the overlays and tracks focus restoration in order. Use sparingly: prefer collapsing into a single confirm flow when you can.

dialog-nested.svelte

<Dialog.Root bind:open={parentOpen}>
	<Dialog.Content>
		<Dialog.Header>...</Dialog.Header>
		<Button onclick={() => (childOpen = true)}>Open inner</Button>
	</Dialog.Content>
</Dialog.Root>

<Dialog.Root bind:open={childOpen}>
	<Dialog.Content>...</Dialog.Content>
</Dialog.Root>

Dialog.Root props

Inherits bits-ui Dialog.Root props via spread. Listed here are the most common bindings.

Prop	Type	Default	Description
	`boolean (bindable)`	`false`	Controls visibility. Two-way bindable.
	`(open: boolean) => void`	—	Fires when the open state changes for any reason.

Dialog.Content props

Type	Default	Description
`boolean`	`true`	Renders the absolute-positioned top-right ghost close button.
`ComponentProps<Dialog.Portal>`	—	Forwarded to the internal portal — useful for scoping the mount target.
`string`	—	Merged onto the content surface via tailwind-merge.