Sheet
Extends the Dialog component to display content that complements the main content.
Saved preference for
elorm init --ui-library base-uiPreviewCode
"use client"
import { Button } from "@/components/ui/button"
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"
export function SheetDemo() {
return (
<Sheet>
<SheetTrigger>
<Button variant="outline">Open sheet</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Share document</SheetTitle>
<SheetDescription>
Invite teammates or copy a private link to collaborate.
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
)
}
Installation#
pnpm dlx elorm add sheetUsage#
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"Extends the Dialog component to display content that complements the main content.