DrawerScrollableContent() — ui Function Reference

Architecture documentation for the DrawerScrollableContent() function in drawer-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ DrawerScrollableContent() — ui Function Reference

Dependency Diagram

graph TD
  bf5896a3_03d6_abfa_4f2c_c43add8e6c92["DrawerScrollableContent()"]
  4a7c84ce_402c_45ed_f23a_ed81415c4790["drawer-example.tsx"]
  bf5896a3_03d6_abfa_4f2c_c43add8e6c92 -->|defined in| 4a7c84ce_402c_45ed_f23a_ed81415c4790
  style bf5896a3_03d6_abfa_4f2c_c43add8e6c92 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/drawer-example.tsx lines 84–122

function DrawerScrollableContent() {
  return (
    <Example title="Scrollable Content">
      <Drawer direction="right">
        <DrawerTrigger asChild>
          <Button variant="outline">Scrollable Content</Button>
        </DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Move Goal</DrawerTitle>
            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
          </DrawerHeader>
          <div className="no-scrollbar overflow-y-auto px-4">
            {Array.from({ length: 10 }).map((_, index) => (
              <p
                key={index}
                className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
              >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            ))}
          </div>
          <DrawerFooter>
            <Button>Submit</Button>
            <DrawerClose asChild>
              <Button variant="outline">Cancel</Button>
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </Example>
  )
}