Scrollable regions with a custom thumb.
Add this item from the registry, or import it from the package after installing Default File UI.
Registry path
itsvigneshv/default-file-ui/scroll-areaPackage import
import { ScrollArea } from "@default-file/ui/components/df-scroll-area"Vertical overflow with a custom thumb.
Scrollable row 1
Scrollable row 2
Scrollable row 3
Scrollable row 4
Scrollable row 5
Scrollable row 6
Scrollable row 7
Scrollable row 8
Scrollable row 9
Scrollable row 10
Scrollable row 11
Scrollable row 12
Scrollable region with a custom overlay thumb.
| Prop | Type | Default | Notes |
|---|---|---|---|
| viewportClassName | string | — | Classes on the scrollable viewport. |
| className | string | — | Classes on the outer scroll-area root. |
| style | CSSProperties | — | Often used to set a fixed height so overflow can scroll. |
| children | ReactNode | — | Scrollable content. |
| …div attributes | ComponentProps<"div"> | — | Native div props on the root. |
Standalone scrollbar part when composing manually.
| Prop | Type | Default | Notes |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | "vertical" | Scrollbar axis. |
| className | string | — | Additional styles. |