Sheet

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

side

Installation

Usage

<Sheet>
  <SheetTrigger>Open Sheet</SheetTrigger>
  <SheetPortal>
    <SheetOverlay />
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Sheet Title</SheetTitle>
        <SheetDescription>Sheet Description</SheetDescription>
      </SheetHeader>
      <p>Sheet Content</p>
      <SheetFooter>
        <button>Accept</button>
      </SheetFooter>
      <SheetClose>Close</SheetClose>
    </SheetContent>
  </SheetPortal>
</Sheet>

API Reference

The forceMount property is not supported in the SheetPortal component, as it is used for animation.

SheetOverlay

Radix UI API Reference - Dialog.Overlay

Prop	Type	Default
`transition?`	`Transition`	`{ duration: 0.2, ease: 'easeInOut' }`
`...props?`	`HTMLMotionProps<"div">`	-

The asChild and forceMount properties are not supported in the SheetOverlay component, as it is used for animation.

SheetContent

Radix UI API Reference - Dialog.Content

Prop	Type	Default
`side?`	`'top' \| 'bottom' \| 'left' \| 'right'`	`right`
`transition?`	`Transition`	`{ type: 'spring', stiffness: 150, damping: 22 }`
`...props?`	`HTMLMotionProps<"div">`	-