Sheet

Extends the dialog component to display content that slides in from the edge of the screen.

"use client";

import { Button } from "@smartacteam/ambient-web/button";
import { Input } from "@smartacteam/ambient-web/input";
import { Label } from "@smartacteam/ambient-web/label";
import { Sheet } from "@smartacteam/ambient-web/sheet";

export function SheetDemo() {
  return (
    <Sheet.Root>
      <Sheet.Trigger render={<Button>Open Sheet</Button>} />
      <Sheet.Content>
        <Sheet.Header>
          <Sheet.Title>Edit profile</Sheet.Title>
          <Sheet.Description>
            Make changes to your profile here. Click save when you&apos;re done.
          </Sheet.Description>
        </Sheet.Header>
        <div className="grid gap-4 py-4">
          <div className="grid gap-3">
            <Label htmlFor="name">Name</Label>
            <Input.Text id="name" defaultValue="Matt Ström-Awn" />
          </div>
          <div className="grid gap-3">
            <Label htmlFor="username">Username</Label>
            <Input.Text id="username" defaultValue="@mattstromawn" />
          </div>
        </div>
        <Sheet.Footer>
          <Sheet.Close render={<Button>Cancel</Button>} />
          <Button variant="primary">Save changes</Button>
        </Sheet.Footer>
      </Sheet.Content>
    </Sheet.Root>
  );
}

Usage

import { Sheet } from "@smartacteam/ambient-web/sheet";

<Sheet.Root>
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header>
      <Sheet.Title>Sheet Title</Sheet.Title>
      <Sheet.Description>Sheet description goes here.</Sheet.Description>
    </Sheet.Header>
    <div>Sheet content</div>
    <Sheet.Footer>
      <Sheet.Close>Close</Sheet.Close>
    </Sheet.Footer>
  </Sheet.Content>
</Sheet.Root>

Examples

Side Variants

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

"use client";

import { Button } from "@smartacteam/ambient-web/button";
import { Sheet } from "@smartacteam/ambient-web/sheet";

const SHEET_SIDES = ["top", "right", "bottom", "left"] as const;

export function SheetSidesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      {SHEET_SIDES.map((side) => (
        <Sheet.Root key={side}>
          <Sheet.Trigger render={<Button>Open {side}</Button>} />
          <Sheet.Content side={side}>
            <Sheet.Header>
              <Sheet.Title>Sheet from {side}</Sheet.Title>
              <Sheet.Description>
                This sheet slides in from the {side} side of the screen.
              </Sheet.Description>
            </Sheet.Header>
            <div className="flex-1 py-4">
              <p className="text-fg-secondary text-md">
                You can customize the sheet to slide in from any edge: top,
                right, bottom, or left. Each side automatically adjusts its
                border, rounding, and animation direction.
              </p>
            </div>
            <Sheet.Footer>
              <Sheet.Close render={<Button>Close</Button>} />
            </Sheet.Footer>
          </Sheet.Content>
        </Sheet.Root>
      ))}
    </div>
  );
}

<Sheet.Content side="right"> {/* default */}
<Sheet.Content side="left">
<Sheet.Content side="top">
<Sheet.Content side="bottom">

Content API Reference

Prop	Type	Default
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`
`showCloseButton`	`boolean`	`true`

Design Notes

The sheet component:

Positioning: Full height/width on the edge specified by the side prop
Width: 75% on mobile, max 28rem (sm:max-w-lg) on desktop for left/right sides
Height: Auto with max 85vh for top/bottom sides
Animation: Slides in/out from the specified edge with 200ms duration, starting from 10% off-screen
Border: Single border on the edge opposite to the slide direction
Rounding: Rounded on corners opposite to the edge
Close button: Positioned in top-right for most sides, bottom-right for bottom sheets

Layout Pattern

The sheet uses a flexbox column layout to ensure proper spacing:

Content: Provides consistent padding (p-6) and uses flex flex-col to stack children
Header: Includes bottom padding (pb-4) to separate from content
Body content: Add vertical padding (py-4) to your content wrapper for proper spacing
Footer: Includes top padding (pt-4) and mt-auto to stick to the bottom

<Sheet.Content>
  <Sheet.Header>{/* pb-4 applied automatically */}</Sheet.Header>
  <div className="py-4">{/* Your content with vertical spacing */}</div>
  <Sheet.Footer>{/* pt-4 and mt-auto applied automatically */}</Sheet.Footer>
</Sheet.Content>

The component uses the same design tokens as Dialog for consistency (surface-50, border-stroke, shadow-lg).

Customizing Animation

The sheet uses a fixed 10% slide distance defined in the component source. To customize the animation distance, modify the arbitrary value in sheet.tsx:

// Example: Change from 10% to 20%
"slide-in-from-right-[20%]";
"slide-out-to-right-[20%]";

The default 10% creates a subtle slide effect while still being clearly visible to users.