Sheet
Extends the Dialog component to display content that complements the main content of the screen.
"use client"
import {
Button,
Input,Usage
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "uilab-core"<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>This action cannot be undone.</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>Examples
Sides
Use the side prop on SheetContent to set the edge of the screen where the sheet appears. Values are top, right, bottom, or left.
"use client"
import {
Button,
Sheet,No Close Button
Use showCloseButton={false} on SheetContent to hide the close button.
"use client"
import {
Button,
Sheet,