Sheet

overlays

Extends the Dialog component to display content that complements the main content of the screen from a side edge.

Preview

Installation

npm install @launchapp/design-system
Import
import {  Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription} from "@launchapp/design-system";

Examples

Sheet from Right

<Sheet>  <SheetTrigger asChild>    <Button variant="outline">Open Sheet</Button>  </SheetTrigger>  <SheetContent>    <SheetHeader>      <SheetTitle>Edit profile</SheetTitle>      <SheetDescription>        Make changes to your profile here. Click save when you're done.      </SheetDescription>    </SheetHeader>    <div className="py-4">      <Input placeholder="Name" />    </div>  </SheetContent></Sheet>

Props

PropTypeDefaultDescription
open
boolean—Controlled open state.
onOpenChange
(open: boolean) => void—Callback when open state changes.
side
"top" | "right" | "bottom" | "left""right"Side from which the sheet slides (on SheetContent).
← PreviousSeparator
Next →Skeleton