SheetContent() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ SheetContent() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/ui/sheet.tsx lines 45–82

function SheetContent({
  className,
  children,
  side = "right",
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: "top" | "right" | "bottom" | "left"
  showCloseButton?: boolean
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        data-slot="sheet-content"
        data-side={side}
        className={cn("cn-sheet-content", className)}
        {...props}
      >
        {children}
        {showCloseButton && (
          <SheetPrimitive.Close data-slot="sheet-close" asChild>
            <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>
            </Button>
          </SheetPrimitive.Close>
        )}
      </SheetPrimitive.Content>
    </SheetPortal>
  )
}