Modal

A low-level overlay primitive for building custom dialog surfaces.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add modal

Usage

Import Modal and use it in your component:

import * as Modal from '$lib/sivir/components/modal';
import Shortcut from '$lib/sivir/components/shortcut';

<Modal.Root open={isOpen} orientation="horizontal">
  <Modal.Trigger>Open</Modal.Trigger>
  <Modal.Content>
    <Modal.Header>
      <Modal.Title>Title</Modal.Title>
    </Modal.Header>
    <Modal.Footer>
      <Modal.Close>Cancel <Shortcut shortcut="esc" /></Modal.Close>
      <Modal.Confirm>Save <Shortcut shortcut="enter" /></Modal.Confirm>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

Examples

Modal with various structures.

Basic

Nested

With select

A Select inside a dialog keeps its own layer: Escape closes the menu first and only then the dialog.

Compact

Large

Wide

Anatomy

Modal.Root - Controls modal state.

Modal.Trigger - Opens the modal.

Modal.Content - Renders the modal surface.

Modal.Title - Renders the modal title.

Modal.Description - Renders the modal description.

Modal.Header - Groups modal heading content.

Modal.Body - Renders the modal body.

Modal.Close - Closes the modal.

Modal.Footer - Groups modal actions.

Modal.Confirm - Confirms and closes the modal.