120k
New

Dialog

PreviousNext

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/dialog

Usage

<script lang="ts">
  import * as Dialog from "$lib/components/ui/dialog/index.js";
</script>
<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
      <Dialog.Description>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </Dialog.Description>
    </Dialog.Header>
  </Dialog.Content>
</Dialog.Root>

Composition

Use the following composition to build a Dialog:

Dialog.Root
├── Dialog.Trigger
└── Dialog.Content
    ├── Dialog.Header
    │   ├── Dialog.Title
    │   └── Dialog.Description
    └── Dialog.Footer

Examples

Custom Close Button

Replace the default close control with your own button.

No Close Button

Use showCloseButton={false} to hide the close button.

Keep actions visible while the content scrolls.

Scrollable Content

Long content can scroll while the header stays in view.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix UI documentation for more information.