Sheet

From the right (default)

From the right (default) — see the example below.

tsx

import { Sheet } from "~/components/ui/base/sheet";
import { Button } from "~/components/ui/base/button";

<Sheet.Root>
  <Sheet.Trigger>Open panel</Sheet.Trigger>
  <Sheet.Panel>
    <Sheet.Close class="absolute right-4 top-4 z-10" />
    <Sheet.Header>
      <Sheet.Title>Settings</Sheet.Title>
      <Sheet.Description>A short description of the panel content.</Sheet.Description>
    </Sheet.Header>
    <Sheet.Content>
      <p class="text-callout text-secondary-label">Main sheet content.</p>
    </Sheet.Content>
    <Sheet.Footer>
      <Sheet.Close class="rounded-md border border-separator-opaque bg-surface-raised px-4 py-2 text-callout font-medium text-label shadow-sm hover:bg-surface-overlay">
        Cancel
      </Sheet.Close>
      <Button>Save</Button>
    </Sheet.Footer>
  </Sheet.Panel>
</Sheet.Root>

Panel sides (top | bottom | left | right)

Set side on Sheet.Panel . Each sheet has its own Sheet.Root .

tsx

import { Sheet } from "~/components/ui/base/sheet";

<div class="flex flex-wrap gap-2">
  <Sheet.Root>
    <Sheet.Trigger>From the top</Sheet.Trigger>
    <Sheet.Panel side="top">
      <Sheet.Close class="absolute right-4 top-4 z-10" />
      <Sheet.Header>
        <Sheet.Title>Panel from the top</Sheet.Title>
        <Sheet.Description>`side="top"`</Sheet.Description>
      </Sheet.Header>
      <Sheet.Content>
        <p class="text-callout text-secondary-label">Content…</p>
      </Sheet.Content>
    </Sheet.Panel>
  </Sheet.Root>
  <Sheet.Root>
    <Sheet.Trigger>From the bottom</Sheet.Trigger>
    <Sheet.Panel side="bottom">
      <Sheet.Close class="absolute right-4 top-4 z-10" />
      <Sheet.Header>
        <Sheet.Title>Panel from the bottom</Sheet.Title>
        <Sheet.Description>`side="bottom"`</Sheet.Description>
      </Sheet.Header>
      <Sheet.Content>
        <p class="text-callout text-secondary-label">Content…</p>
      </Sheet.Content>
    </Sheet.Panel>
  </Sheet.Root>
  <Sheet.Root>
    <Sheet.Trigger>From the left</Sheet.Trigger>
    <Sheet.Panel side="left">
      <Sheet.Close class="absolute right-4 top-4 z-10" />
      <Sheet.Header>
        <Sheet.Title>Left panel</Sheet.Title>
        <Sheet.Description>`side="left"`</Sheet.Description>
      </Sheet.Header>
      <Sheet.Content>
        <p class="text-callout text-secondary-label">Content…</p>
      </Sheet.Content>
    </Sheet.Panel>
  </Sheet.Root>
  <Sheet.Root>
    <Sheet.Trigger>From the right</Sheet.Trigger>
    <Sheet.Panel side="right">
      <Sheet.Close class="absolute right-4 top-4 z-10" />
      <Sheet.Header>
        <Sheet.Title>Right panel</Sheet.Title>
        <Sheet.Description>`side="right"` (default)</Sheet.Description>
      </Sheet.Header>
      <Sheet.Content>
        <p class="text-callout text-secondary-label">Content…</p>
      </Sheet.Content>
    </Sheet.Panel>
  </Sheet.Root>
</div>

Fullscreen (top | bottom | left | right)

The fullScreen prop — a panel over the whole viewport; the animation direction is set by side .

tsx

import { Sheet } from "~/components/ui/base/sheet";

<div class="flex flex-wrap gap-2">
  <Sheet.Root>
    <Sheet.Trigger>Fullscreen from the top</Sheet.Trigger>
    <Sheet.Panel side="top" fullScreen>
      <Sheet.Close class="absolute right-4 top-4 z-10" />
      <Sheet.Header>
        <Sheet.Title>Fullscreen top</Sheet.Title>
        <Sheet.Description>`side="top"` + `fullScreen`</Sheet.Description>
      </Sheet.Header>
      <Sheet.Content>
        <p class="text-callout text-secondary-label">Content…</p>
      </Sheet.Content>
    </Sheet.Panel>
  </Sheet.Root>
  <Sheet.Root>
    <Sheet.Trigger>Fullscreen from the bottom</Sheet.Trigger>
    <Sheet.Panel side="bottom" fullScreen>
      <Sheet.Close class="absolute right-4 top-4 z-10" />
      <Sheet.Header>
        <Sheet.Title>Fullscreen bottom</Sheet.Title>
        <Sheet.Description>`side="bottom"` + `fullScreen`</Sheet.Description>
      </Sheet.Header>
      <Sheet.Content>
        <p class="text-callout text-secondary-label">Content…</p>
      </Sheet.Content>
    </Sheet.Panel>
  </Sheet.Root>
  <Sheet.Root>
    <Sheet.Trigger>Fullscreen from the left</Sheet.Trigger>
    <Sheet.Panel side="left" fullScreen>
      <Sheet.Close class="absolute right-4 top-4 z-10" />
      <Sheet.Header>
        <Sheet.Title>Fullscreen left</Sheet.Title>
        <Sheet.Description>`side="left"` + `fullScreen`</Sheet.Description>
      </Sheet.Header>
      <Sheet.Content>
        <p class="text-callout text-secondary-label">Content…</p>
      </Sheet.Content>
    </Sheet.Panel>
  </Sheet.Root>
  <Sheet.Root>
    <Sheet.Trigger>Fullscreen from the right</Sheet.Trigger>
    <Sheet.Panel side="right" fullScreen>
      <Sheet.Close class="absolute right-4 top-4 z-10" />
      <Sheet.Header>
        <Sheet.Title>Fullscreen right</Sheet.Title>
        <Sheet.Description>`side="right"` + `fullScreen`</Sheet.Description>
      </Sheet.Header>
      <Sheet.Content>
        <p class="text-callout text-secondary-label">Content…</p>
      </Sheet.Content>
    </Sheet.Panel>
  </Sheet.Root>
</div>

Metadata

Source: meta.generated.json (see npm run generate)

File base/sheet/meta.generated.json not found or path not allowed.