Sheet

Sheet

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

	<script lang="ts">
  import * as Sheet from "$lib/components/ui/sheet/index.js";
  import { buttonVariants } from "$lib/components/ui/button/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
</script>
 
<Sheet.Root>
  <Sheet.Trigger class={buttonVariants({ variant: "outline" })}
    >Open</Sheet.Trigger
  >
  <Sheet.Content side="right">
    <Sheet.Header>
      <Sheet.Title>Edit profile</Sheet.Title>
      <Sheet.Description>
        Make changes to your profile here. Click save when you're done.
      </Sheet.Description>
    </Sheet.Header>
    <div class="grid flex-1 auto-rows-min gap-6 px-4">
      <div class="grid gap-3">
        <Label for="name" class="text-right">Name</Label>
        <Input id="name" value="Pedro Duarte" />
      </div>
      <div class="grid gap-3">
        <Label for="username" class="text-right">Username</Label>
        <Input id="username" value="@peduarte" />
      </div>
    </div>
    <Sheet.Footer>
      <Sheet.Close class={buttonVariants({ variant: "outline" })}
        >Save changes</Sheet.Close
      >
    </Sheet.Footer>
  </Sheet.Content>
</Sheet.Root>

Installation

npx shadcn-svelte@next add sheet

Install `bits-ui`:

npm i bits-ui -D

Copy and paste the component source files linked at the top of this page into your project.

Usage

	<script lang="ts">
  import * as Sheet from "$lib/components/ui/sheet/index.js";
</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.

	<script lang="ts">
  import * as Sheet from "$lib/components/ui/sheet/index.js";
  import { buttonVariants } from "$lib/components/ui/button/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
 
  const SHEET_SIDES = ["top", "right", "bottom", "left"] as const;
</script>
 
<div class="grid grid-cols-2 gap-2">
  {#each SHEET_SIDES as side, _ (side)}
    <Sheet.Root>
      <Sheet.Trigger>
        {#snippet child({ props })}
          <Button variant="outline" {...props} class="capitalize">
            {side}
          </Button>
        {/snippet}
      </Sheet.Trigger>
      <Sheet.Content {side}>
        <Sheet.Header>
          <Sheet.Title>Edit profile</Sheet.Title>
          <Sheet.Description>
            Make changes to your profile here. Click save when you're done.
          </Sheet.Description>
        </Sheet.Header>
        <div class="overflow-y-auto px-4 text-sm">
          <h4 class="mb-4 text-lg font-medium leading-none">Lorem Ipsum</h4>
          {#each { length: 10 } as _, index (index)}
            <p class="mb-4 leading-normal">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          {/each}
        </div>
        <Sheet.Footer>
          <Sheet.Close class={buttonVariants({ variant: "outline" })}>
            Save changes
          </Sheet.Close>
        </Sheet.Footer>
      </Sheet.Content>
    </Sheet.Root>
  {/each}
</div>

Separator Sidebar