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';

<Modal.Root open={isOpen}>
  <Modal.Trigger>Open</Modal.Trigger>
  <Modal.Content>
    <Modal.Header>
      <Modal.Title>Title</Modal.Title>
    </Modal.Header>
  </Modal.Content>
</Modal.Root>

Examples

Modal with various structures.

Basic

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.