Overlays

Sheet

Presents supplementary content from an edge of the viewport.

@dawn/ui/components/sheet

Preview

Rendered from @dawn/ui

Usage

import { Button } from "@dawn/ui/components/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@dawn/ui/components/sheet";

export const DetailsSheet = () => (
  <Sheet>
    <SheetTrigger asChild>
      <Button variant="outline">Open details</Button>
    </SheetTrigger>
    <SheetContent side="right">
      <SheetHeader>
        <SheetTitle>Appointment details</SheetTitle>
        <SheetDescription>Thursday at 10:30.</SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
);

API

SheetContent sidetop | right | bottom | left: Sets the viewport edge and matching motion.
open / defaultOpenboolean: Controls or initializes the sheet state.
SheetContent showCloseButtonboolean: Shows the top-right close action by default.

Exports

SheetSheetTriggerSheetContentSheetHeaderSheetTitleSheetDescriptionSheetFooterSheetClose