Sheet.

A modal dialog that slides out from the edge of the screen. Used for secondary actions, navigation, or displaying complex details without losing the context of the main view.

import { Sheet, SheetContent } from "@/components/ui/sheet"

Configuration

Context

Entrance Direction

Main Viewport

*Renders in a React Portal

Form State Isolation

Portal & Layering

The Sheet lives outside your DOM hierarchy (appended to `document.body` via Portal). This ensures it always sits on top of other content, regardless of `z-index` contexts or `overflow: hidden` on parent containers.

Focus Trap Management

Accessibility is built-in. When the Sheet opens, focus is trapped inside to prevent users from interacting with the background. Upon closing, focus is intelligently restored to the trigger element.

ProfileSettings.tsx

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Profile</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Edit Profile</SheetTitle>
    </SheetHeader>
    <div className="grid gap-4 py-4">
      <Input id="name" value="Pedro Duarte" />
      <Input id="username" value="@peduarte" />
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button type="submit">Save changes</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>