DialogScrollableContent() — ui Function Reference

Architecture documentation for the DialogScrollableContent() function in dialog-scrollable-content.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ DialogScrollableContent() — ui Function Reference

Dependency Diagram

graph TD
  e59e9799_cda4_be3d_d3fe_cff05d30c14f["DialogScrollableContent()"]
  264c03e5_eeea_5c20_f71a_4ef141e599da["dialog-scrollable-content.tsx"]
  e59e9799_cda4_be3d_d3fe_cff05d30c14f -->|defined in| 264c03e5_eeea_5c20_f71a_4ef141e599da
  style e59e9799_cda4_be3d_d3fe_cff05d30c14f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/dialog-scrollable-content.tsx lines 11–40

export function DialogScrollableContent() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>
        Scrollable Content
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Scrollable Content</DialogTitle>
          <DialogDescription>
            This is a dialog with scrollable content.
          </DialogDescription>
        </DialogHeader>
        <div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
          {Array.from({ length: 10 }).map((_, index) => (
            <p key={index} className="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>
      </DialogContent>
    </Dialog>
  )
}