Sheet

A side panel that slides in from the edge of the screen for secondary content and forms.

Component Source

View the source code for the sheet component.

$lib/components/ui/sheet/sheet-content.svelte

Installation

npx nnuikit add sheet

import * as Sheet from "$lib/components/ui/sheet";

Quick Start

A basic sheet consists of a trigger, content area with header, description, body, and footer. By default the sheet slides in from the right.

<Sheet.Root>
  <Sheet.Trigger>
    <Button variant="primary">Open Sheet</Button>
  </Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header>
      <Sheet.Title>Sheet Title</Sheet.Title>
      <Sheet.Description>
        This is a side panel that slides in from the edge of the screen.
      </Sheet.Description>
    </Sheet.Header>
    <div class="flex-1 px-6 py-4">
      <p class="text-text-neutral-secondary text-sm">
        Place your secondary content, forms, or navigation here.
      </p>
    </div>
    <Sheet.Footer>
      <Sheet.Close>
        <Button variant="tertiary">Cancel</Button>
      </Sheet.Close>
      <Button variant="primary">Save</Button>
    </Sheet.Footer>
  </Sheet.Content>
</Sheet.Root>

Side Variants

The sheet can slide in from any edge of the screen. Use the side prop on Sheet.Content to control the direction.

Right (default)

The default side. Ideal for detail panels, settings, and edit forms.

<Sheet.Root>
  <Sheet.Trigger>
    <Button variant="primary">Open Sheet</Button>
  </Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header>
      <Sheet.Title>Sheet Title</Sheet.Title>
      <Sheet.Description>
        This is a side panel that slides in from the edge of the screen.
      </Sheet.Description>
    </Sheet.Header>
    <div class="flex-1 px-6 py-4">
      <p class="text-text-neutral-secondary text-sm">
        Place your secondary content, forms, or navigation here.
      </p>
    </div>
    <Sheet.Footer>
      <Sheet.Close>
        <Button variant="tertiary">Cancel</Button>
      </Sheet.Close>
      <Button variant="primary">Save</Button>
    </Sheet.Footer>
  </Sheet.Content>
</Sheet.Root>

Left

Useful for navigation panels, sidebars, or table-of-contents overlays.

<Sheet.Root>
  <Sheet.Trigger>
    <Button variant="secondary">Open Left</Button>
  </Sheet.Trigger>
  <Sheet.Content side="left">
    <Sheet.Header>
      <Sheet.Title>Left Sheet</Sheet.Title>
      <Sheet.Description>Slides in from the left edge.</Sheet.Description>
    </Sheet.Header>
    <div class="flex-1 px-6 py-4">
      <p class="text-text-neutral-secondary text-sm">
        Useful for navigation panels or sidebars.
      </p>
    </div>
  </Sheet.Content>
</Sheet.Root>

Top

Great for notifications, banners, or search overlays that drop down from the top of the viewport.

<Sheet.Root>
  <Sheet.Trigger>
    <Button variant="secondary">Open Top</Button>
  </Sheet.Trigger>
  <Sheet.Content side="top">
    <Sheet.Header>
      <Sheet.Title>Top Sheet</Sheet.Title>
      <Sheet.Description>Slides down from the top edge.</Sheet.Description>
    </Sheet.Header>
    <div class="px-6 py-4">
      <p class="text-text-neutral-secondary text-sm">
        Great for notifications, banners, or search overlays.
      </p>
    </div>
  </Sheet.Content>
</Sheet.Root>

Bottom

Common on mobile for action sheets, contextual menus, or confirmation panels that slide up from the bottom.

<Sheet.Root>
  <Sheet.Trigger>
    <Button variant="secondary">Open Bottom</Button>
  </Sheet.Trigger>
  <Sheet.Content side="bottom">
    <Sheet.Header>
      <Sheet.Title>Bottom Sheet</Sheet.Title>
      <Sheet.Description>Slides up from the bottom edge.</Sheet.Description>
    </Sheet.Header>
    <div class="px-6 py-4">
      <p class="text-text-neutral-secondary text-sm">
        Common for mobile action sheets or contextual menus.
      </p>
    </div>
  </Sheet.Content>
</Sheet.Root>

Accessibility

Focus trap: focus locked inside sheet when open

Keyboard: Escape closes the sheet

Click outside: clicking overlay dismisses the sheet

ARIA: role="dialog" with aria-modal="true"

Focus restore: returns focus to trigger on close

API Reference

Sheet.Root

The main container for the sheet, managing visibility state. Wraps the bits-ui Dialog primitive.

Prop	Type	Default	Description
`open`	`boolean`	false	The controlled open state of the sheet.
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.

Sheet.Content

The visual panel of the sheet. Renders inside a portal with an overlay backdrop. Controls the slide direction via the side prop.

Prop	Type	Default	Description
`side`	`"left" \| "right" \| "top" \| "bottom"`	"right"	The edge of the screen the sheet slides in from.
`class`	`string`	-	Additional CSS classes to apply to the sheet content container.
`portalProps`	`SheetPortalProps`	-	Props passed down to the underlying SheetPortal component.

Built on bits-ui — Sheet uses Dialog from bits-ui for focus trapping, portal rendering, and ARIA attributes. For the full primitive API (animations, forceMount, etc.), see the bits-ui Dialog docs.