Dialog

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/dialog.json

Usage

<script lang="ts">
  import * as Dialog from "$lib/components/ui/dialog/index.js";
</script>

<Dialog.Root>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <Dialog.Popup>
    <Dialog.Header>
      <Dialog.Title>Dialog Title</Dialog.Title>
      <Dialog.Description>Dialog Description</Dialog.Description>
    </Dialog.Header>
    <Dialog.Panel>Content</Dialog.Panel>
    <Dialog.Footer>
      <Dialog.Close>Close</Dialog.Close>
    </Dialog.Footer>
  </Dialog.Popup>
</Dialog.Root>

API Reference

Dialog.Root

Root component. Wraps Dialog.Root from Shards UI.

Dialog.Trigger

Trigger button that opens the dialog. Wraps Dialog.Trigger from Shards UI.

Dialog.createHandle

Creates a handle for detached dialog triggers. Use it when the trigger and popup need to be coordinated across different parts of the tree.

Popup container that displays the dialog content. Also exported as Dialog.Content.

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`true`	When true, displays a close button in the top-right corner
`bottomStickOnMobile`	`boolean`	`true`	When true, sticks to the bottom of the screen on mobile devices
`closeProps`	`ComponentProps<typeof Dialog.Close>`	-	Props forwarded to the internal close button, useful for overriding `aria-label`
`portalProps`	`ComponentProps<typeof Dialog.Portal>`	-	Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see the Shards UI Dialog portal API

Dialog.Header

Container for the dialog title and description. Supports the as prop for polymorphic composition (for example, as="header").

Dialog.Footer

Footer section for action buttons. Supports the as prop for polymorphic composition.

Prop	Type	Default	Description
`variant`	`"default" \\| "bare"`	`"default"`	Controls the footer styling. `default` includes border and background, `bare` removes them

Example:

<!-- Default variant (with border and background) -->
<Dialog.Footer>
  <Dialog.Close>Cancel</Dialog.Close>
  <Button>Save</Button>
</Dialog.Footer>

<!-- Bare variant (no border or background) -->
<Dialog.Footer variant="bare">
  <Dialog.Close>Cancel</Dialog.Close>
  <Button>Save</Button>
</Dialog.Footer>

Dialog.Title

Title component. Wraps Dialog.Title from Shards UI.

Dialog.Description

Description component. Wraps Dialog.Description from Shards UI.

Dialog.Panel

Scrollable content container. Automatically wraps content in a ScrollArea component. Supports the as prop for polymorphic composition.

Prop	Type	Default	Description
`scrollFade`	`boolean`	`true`	When true, shows a fade effect at scroll edges

Example:

<Dialog.Panel>
  <!-- Long content that will scroll if it exceeds the dialog height -->
  <div>...</div>
</Dialog.Panel>

Dialog.Close

Close button component. Wraps Dialog.Close from Shards UI.

Dialog.Portal

Portal component for rendering outside the DOM hierarchy. Wraps Dialog.Portal from Shards UI.

Dialog.Backdrop

Backdrop/overlay component. Also exported as Dialog.Overlay. Wraps Dialog.Backdrop from Shards UI.

Dialog.Viewport

Viewport component for positioning. Wraps Dialog.Viewport from Shards UI.