Primitive

Sheet

Extends the Dialog component to display content that complements the main content of the screen, sliding in from the side.

Installation

npx benflux-ui add sheet

Usage

import {
  Sheet, SheetContent, SheetHeader,
  SheetTitle, SheetTrigger,
} from "@benflux-ui/react"

<Sheet>
  <SheetTrigger asChild>
    <Button>Open</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
    </SheetHeader>
    Content here
  </SheetContent>
</Sheet>

Props — SheetContent

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"right"	Side from which the sheet slides in