120k
New

Sheet

PreviousNext

Extends the Dialog component to display content that complements the main content of the screen.

Installation

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

Usage

<script lang="ts">
  import * as Sheet from "@/svelte-ui/sheet/index.js";
</script>
<Sheet.Root>
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header>
      <Sheet.Title>Are you absolutely sure?</Sheet.Title>
      <Sheet.Description>This action cannot be undone.</Sheet.Description>
    </Sheet.Header>
  </Sheet.Content>
</Sheet.Root>

Composition

Use the following composition to build a Sheet:

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

Examples

Side

Use the side prop on Sheet.Content to set the edge of the screen where the sheet appears. Values are top, right, bottom, or left.

No Close Button

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

API Reference

See the Radix UI Dialog documentation.