Docs
Sheet

Sheet

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

Loading...

Installation

	npx  shadcn-svelte@latest add sheet

Usage

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

Examples

Side

Pass the side property to <SheetContent /> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.

Loading...