Tulip Logo IconTulip
Components

Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Usage

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@tulip-systems/core/components/client";
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

Side

Use the side prop on SheetContent to set the edge of the screen where the sheet appears.

No Close Button

The sheet renders a close button by default. To hide it, apply a class to hide the auto-injected close control.

On this page