SheetDemo() — ui Function Reference

Architecture documentation for the SheetDemo() function in sheet-demo.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ SheetDemo() — ui Function Reference

Dependency Diagram

graph TD
  e6a7dd23_f426_3e2e_7f33_440dfe325b65["SheetDemo()"]
  2cd6e80e_b4be_cba4_37e7_2b8bb693c70d["sheet-demo.tsx"]
  e6a7dd23_f426_3e2e_7f33_440dfe325b65 -->|defined in| 2cd6e80e_b4be_cba4_37e7_2b8bb693c70d
  style e6a7dd23_f426_3e2e_7f33_440dfe325b65 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/sheet-demo.tsx lines 15–47

export default function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you&apos;re done.
          </SheetDescription>
        </SheetHeader>
        <div className="grid flex-1 auto-rows-min gap-6 px-4">
          <div className="grid gap-3">
            <Label htmlFor="sheet-demo-name">Name</Label>
            <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
          </div>
          <div className="grid gap-3">
            <Label htmlFor="sheet-demo-username">Username</Label>
            <Input id="sheet-demo-username" defaultValue="@peduarte" />
          </div>
        </div>
        <SheetFooter>
          <Button type="submit">Save changes</Button>
          <SheetClose asChild>
            <Button variant="outline">Close</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}