Scroll Area

A native scroll container with stylable scrollbars. The required structure is `Root > Viewport > Content` — the `Scrollbar`s go **outside** the `Viewport`, as siblings within `Root`.

Scroll Area component

Name	Role	Department	Location	Status	Joined	Manager
Alice Müller	Senior Engineer	Platform	Berlin	Active	Jan 2021	Tomás R.
Bruno Carvalho	Product Manager	Growth	São Paulo	Active	Mar 2020	Sarah L.
Chloé Martin	Designer	Brand	Paris	On leave	Jul 2022	Nina K.
Dmitri Volkov	Data Scientist	Analytics	Remote	Active	Nov 2019	James W.
Emre Yildiz	DevOps Engineer	Infra	Istanbul	Active	Feb 2023	Alice M.
Fatima Hassan	QA Engineer	Quality	Cairo	Inactive	Sep 2021	Bruno C.
Grace Nakamura	Tech Lead	Platform	Tokyo	Active	Apr 2018	Dmitri V.

    import { ScrollArea } from "gnome-ui/scroll-area";

    export function ScrollAreaVertical() {
      return (
        <ScrollArea.Root className="h-48 w-80 rounded-xl border border-border bg-card overflow-hidden">
          <ScrollArea.Viewport className="h-full w-full">
            <ScrollArea.Content className="px-4 py-3">
              <p>Long content here...</p>
            </ScrollArea.Content>
          </ScrollArea.Viewport>
          {/* Scrollbar goes outside the Viewport */}
          <ScrollArea.Scrollbar orientation="vertical">
            <ScrollArea.Thumb />
          </ScrollArea.Scrollbar>
        </ScrollArea.Root>
      );
    }

Code Block

Ideal for code blocks with horizontal scroll. min-w-max on Content prevents text wrapping.

1import { ScrollArea } from "@base-ui-components/react/scroll-area";
2 
3export function ScrollAreaExample() {
4  return (
5    <ScrollArea.Root className="h-48 w-full rounded-xl border border-border">
6      <ScrollArea.Viewport className="h-full w-full">
7        <ScrollArea.Content className="min-w-max p-4">
8          {/* Your content here */}
9        </ScrollArea.Content>
10      </ScrollArea.Viewport>
11      <ScrollArea.Scrollbar orientation="vertical">
12        <ScrollArea.Thumb />
13      </ScrollArea.Scrollbar>
14      <ScrollArea.Scrollbar orientation="horizontal">
15        <ScrollArea.Thumb />
16      </ScrollArea.Scrollbar>
17      <ScrollArea.Corner />
18    </ScrollArea.Root>
19  );
20}

ScrollAreaContent

A container for the content of the scroll area. Renders a <div> element.

Documentation: Base UI Scroll Area

Props

Prop	Type	Default	Description
className	`string \| (...) => string)`	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
render	`ReactElement> \| ComponentRenderFn`	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

ScrollAreaCorner

A small rectangular area that appears at the intersection of horizontal and vertical scrollbars. Renders a <div> element.

Documentation: Base UI Scroll Area

Props

Prop	Type	Default	Description
className	`string \| (...) => string)`	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
render	`ReactElement> \| ComponentRenderFn`	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

ScrollAreaRoot

Groups all parts of the scroll area. Renders a <div> element.

Documentation: Base UI Scroll Area

Props

Prop	Type	Default	Description
className	`string \| (...) => string)`	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
render	`ReactElement> \| ComponentRenderFn`	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
overflowEdgeThreshold	`number \| Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number; }>`	`0`	The threshold in pixels that must be passed before the overflow edge attributes are applied. Accepts a single number for all edges or an object to configure them individually.

ScrollAreaScrollbar

A vertical or horizontal scrollbar for the scroll area. Renders a <div> element.

Documentation: Base UI Scroll Area

Props

Prop	Type	Default	Description
className	`string \| (...) => string)`	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
render	`ReactElement> \| ComponentRenderFn`	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
orientation	`"horizontal" \| "vertical"`	`'vertical'`	Whether the scrollbar controls vertical or horizontal scroll.
keepMounted	`boolean`	`false`	Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.

ScrollAreaThumb

The draggable part of the scrollbar that indicates the current scroll position. Renders a <div> element.

Documentation: Base UI Scroll Area

Props

Prop	Type	Default	Description
className	`string \| (...) => string)`	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
render	`ReactElement> \| ComponentRenderFn`	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

ScrollAreaViewport

The actual scrollable container of the scroll area. Renders a <div> element.

Documentation: Base UI Scroll Area

Props

Prop	Type	Default	Description
className	`string \| (...) => string)`	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
render	`ReactElement> \| ComponentRenderFn`	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

On this page