DrawerScrollableContent() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ DrawerScrollableContent() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/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>
  )
}