Sheet

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

Installation

›pnpm dlx shadcn@latest add @evolphin/sheet

Usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/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>

Type Definitions

interface SheetContentProps {
  /** The edge of the screen where the sheet appears */
  side?: "top" | "bottom" | "left" | "right";  
SheetContentProps.side?: "top" | "bottom" | "left" | "right" | undefined
The edge of the screen where the sheet appears
}

Examples

Default

Side

API Reference

Prop	Type	Default	Description
`open`	`boolean`	-	The controlled open state of the sheet.
`defaultOpen`	`boolean`	-	The default open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.
`modal`	`boolean`	`true`	The modality of the sheet.

SheetTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.

SheetContent

Prop	Type	Default	Description
`side`	`"top" \	"right" \	"bottom" \
`className`	`string`	-	Additional CSS classes

SheetClose

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.

Search

Sheet

On this page