SheetDemo() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ SheetDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/base/sheet-demo.tsx lines 15–43

export default function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>Open</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 render={<Button variant="outline" />}>Close</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}