DrawerContent() — ui Function Reference

Architecture documentation for the DrawerContent() function in drawer.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ DrawerContent() — ui Function Reference

Dependency Diagram

graph TD
  d3cbdcd8_b9a5_457b_94a0_fdb5416fdb1f["DrawerContent()"]
  0b3a4d66_8f91_4b0d_4660_ad4a893ab531["drawer.tsx"]
  d3cbdcd8_b9a5_457b_94a0_fdb5416fdb1f -->|defined in| 0b3a4d66_8f91_4b0d_4660_ad4a893ab531
  style d3cbdcd8_b9a5_457b_94a0_fdb5416fdb1f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/ui/drawer.tsx lines 45–66

function DrawerContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
  return (
    <DrawerPortal data-slot="drawer-portal">
      <DrawerOverlay />
      <DrawerPrimitive.Content
        data-slot="drawer-content"
        className={cn(
          "cn-drawer-content group/drawer-content fixed z-50",
          className
        )}
        {...props}
      >
        <div className="cn-drawer-handle mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
        {children}
      </DrawerPrimitive.Content>
    </DrawerPortal>
  )
}