ScrollArea

Scrollable container with custom design-system scrollbars. children are placed inside a Radix viewport, so give the root (or viewportClassName) an explicit height/width for scrolling to engage. Import from "@desk/ui/components/scroll-area".

Alabaster

Bone

Chalk

Dune

Ecru

Flax

Greige

Ivory

Khaki

Linen

Usage

import { ScrollArea, ScrollBar } from "@desk/ui/components/scroll-area";

Best practices

Give the root (or viewportClassName) an explicit height/width — without a bounded size the content never overflows and the custom scrollbar never engages.
ScrollArea renders its own ScrollBar; reach for ScrollBar directly only when hand-composing a Radix scroll area.

Props

Prop	Type	Description
allowOverflow	`boolean`	Allow content to visually overflow the root container.
orientation	`Orientation`	Orientation of the scrollbar. Defaults to "vertical". Set to "horizontal" for horizontal scrolling.
hideScrollbar	`boolean`	Hide the scrollbar completely while maintaining scroll functionality
viewportClassName	`string`	Additional classes for the viewport (scrolling container)

Also exports

componentScrollBar

Composition

Used by

DataGrid, SegmentedControl, Tabs, TagSelector