Sheet

A drawer that slides in from any side of the screen.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add sheet

Usage

Import Sheet and compose it with sub-components:

import * as Sheet from '$lib/sivir/components/sheet';

<Sheet.Root>
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header>
      <Sheet.Title>Title</Sheet.Title>
    </Sheet.Header>
    {/* content */}
  </Sheet.Content>
</Sheet.Root>

Examples

Sheet with different sides and compositions.

Left side

Anatomy

Sheet.Root - Controls sheet state.

Sheet.Trigger - Opens the sheet.

Sheet.Title - Renders the sheet title.

Sheet.Header - Groups sheet heading content.

Sheet.Footer - Groups sheet actions.

Sheet.Description - Renders the sheet description.

Sheet.Content - Renders the sheet surface.

Sheet.Close - Closes the sheet.