Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# ScrollArea

Container with custom scrollbars for overflow content

## Example​

    import * as React from "react"

    import { ScrollArea, Separator } from "@databricks/appkit-ui/react"

    const tags = Array.from({ length: 50 }).map(
      (_, i, a) => `v1.2.0-beta.${a.length - i}`
    )

    export default function ScrollAreaExample() {
      return (
        <ScrollArea className="h-72 w-48 rounded-md border">
          <div className="p-4">
            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
            {tags.map((tag) => (
              <>
                <div key={tag} className="text-sm">
                  {tag}
                </div>
                <Separator className="my-2" />
              </>
            ))}
          </div>
        </ScrollArea>
      )
    }

## ScrollArea​

Container with custom scrollbars for overflow content

Source: `packages/appkit-ui/src/react/ui/scroll-area.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`type` | `enum` |  | - | -
`dir` | `enum` |  | - | -
`scrollHideDelay` | `number` |  | - | -
`asChild` | `boolean` |  | - | -

### Usage​

    import { ScrollArea } from '@databricks/appkit-ui';

    <ScrollArea /* props */ />

## ScrollBar​

Scrollbar component for the scroll area

Source: `packages/appkit-ui/src/react/ui/scroll-area.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`forceMount` | `true` |  | - | -
`orientation` | `enum` |  | `vertical` | -
`asChild` | `boolean` |  | - | -

### Usage​

    import { ScrollBar } from '@databricks/appkit-ui';

    <ScrollBar /* props */ />