Sheet

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

Usage


import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@abbyyproduct/ui/components/sheet';


<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

Default

Side

You can change the side of the screen the sheet will slide-out from by setting the side property on the SheetContent component.

Size

You can change the size of the dialog by setting the size of the SheetContent component.

ℹ️

You will also need to change the max-width for the small viewport (i.e. sm:max-w-[set size here])