SheetContent() — ui Function Reference

Architecture documentation for the SheetContent() function in sheet.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ SheetContent() — ui Function Reference

Dependency Diagram

graph TD
  4accbdd7_ef11_0922_976c_f77739582774["SheetContent()"]
  93cc6a41_6b61_94c9_2820_1f4439c1f504["sheet.tsx"]
  4accbdd7_ef11_0922_976c_f77739582774 -->|defined in| 93cc6a41_6b61_94c9_2820_1f4439c1f504
  style 4accbdd7_ef11_0922_976c_f77739582774 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/ui/sheet.tsx lines 36–80

function SheetContent({
  className,
  children,
  side = "right",
  showCloseButton = true,
  ...props
}: SheetPrimitive.Popup.Props & {
  side?: "top" | "right" | "bottom" | "left"
  showCloseButton?: boolean
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Popup
        data-slot="sheet-content"
        data-side={side}
        className={cn("cn-sheet-content", className)}
        {...props}
      >
        {children}
        {showCloseButton && (
          <SheetPrimitive.Close
            data-slot="sheet-close"
            render={
              <Button
                variant="ghost"
                className="cn-sheet-close"
                size="icon-sm"
              />
            }
          >
            <IconPlaceholder
              lucide="XIcon"
              tabler="IconX"
              hugeicons="Cancel01Icon"
              phosphor="XIcon"
              remixicon="RiCloseLine"
            />
            <span className="sr-only">Close</span>
          </SheetPrimitive.Close>
        )}
      </SheetPrimitive.Popup>
    </SheetPortal>
  )
}