Sheet

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

@react.component
let make = () =>
  <Sheet>

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Sheet
Copy

Usage

Copy<Sheet>
  <Sheet.Trigger render={<Button variant=Outline />}>
    {"Open"->React.string}
  </Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header>
      <Sheet.Title> {"Are you absolutely sure?"->React.string} </Sheet.Title>
      <Sheet.Description> {"This action cannot be undone."->React.string} </Sheet.Description>
    </Sheet.Header>
  </Sheet.Content>
</Sheet>

Examples

Side

Use the side prop on SheetContent to set the edge of the screen where the sheet appears. Values are top, right, bottom, or left.

@module("tailwind-merge")
external cn: (string, option<string>) => string = "twMerge"

No Close Button

Use showCloseButton={false} on SheetContent to hide the close button.

@react.component
let make = () =>
  <Sheet>

API Reference

See the Base UI Dialog documentation.