@manhphi1309/sheet

A beautiful off-canvas dialog component (also known as a Drawer or Sidebar Modal).

Subcomponents

This package provides the following components:

• Sheet
• SheetTrigger
• SheetClose
• SheetContent
• SheetHeader
• SheetFooter
• SheetTitle
• SheetDescription

Dependencies

This package relies on:

• @manhphi1309/button
• @manhphi1309/utils
• clsx
• lucide-react
• radix-ui
• tailwind-merge

Installation

npm install @manhphi1309/sheet

Usage Example

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from "@manhphi1309/sheet"
import { Button } from "@manhphi1309/button"

export default function Example() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open Menu</Button>
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Navigation Menu</SheetTitle>
          <SheetDescription>Access all your links here.</SheetDescription>
        </SheetHeader>
        {/* Links go here */}
      </SheetContent>
    </Sheet>
  )
}