Sivir UI
Studio 64

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';
import Shortcut from '$lib/sivir/components/shortcut';

<Sheet.Root bind:open>
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Content side="right">
    <Sheet.Header>
      <Sheet.Title>Title</Sheet.Title>
      <Sheet.Description>Describe what lives here.</Sheet.Description>
    </Sheet.Header>
    {/* content */}
    <Sheet.Footer>
      <Sheet.Close>Cancel <Shortcut shortcut="esc" /></Sheet.Close>
      <Button>Save <Shortcut shortcut="enter" /></Button>
    </Sheet.Footer>
  </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.