Scroll Area
A native scroll container with custom scrollbars.
View as MarkdownAnatomy
Import the component and assemble its parts:
import { ScrollArea } from '@base-ui-components/react/scroll-area';
<ScrollArea.Root>
<ScrollArea.Viewport />
<ScrollArea.Scrollbar>
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Corner />
</ScrollArea.Root>
API reference
Root
Groups all parts of the scroll area.
Renders a <div>
element.
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: ScrollArea.Root.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
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.- Type
| ReactElement
| ((props: HTMLProps, state: ScrollArea.Root.State) => ReactElement)
--scroll-area-corner-height
The scroll area's corner height.
--scroll-area-corner-width
The scroll area's corner width.
Viewport
The actual scrollable container of the scroll area.
Renders a <div>
element.
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: ScrollArea.Viewport.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
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.- Type
| ReactElement
| ((props: HTMLProps, state: ScrollArea.Viewport.State) => ReactElement)
Content
A container for the content of the scroll area.
Renders a <div>
element.
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: ScrollArea.Content.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
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.- Type
| ReactElement
| ((props: HTMLProps, state: ScrollArea.Content.State) => ReactElement)
Scrollbar
A vertical or horizontal scrollbar for the scroll area.
Renders a <div>
element.
orientation
'horizontal' | 'vertical'
(default: 'vertical'
)
'horizontal' | 'vertical'
'vertical'
- Name
- Description
Whether the scrollbar controls vertical or horizontal scroll.
- Type
'horizontal' | 'vertical'
- Default
'vertical'
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: ScrollArea.Scrollbar.State) => string)
keepMounted
boolean
(default: false
)
boolean
false
- Name
- Description
Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.
- Type
boolean
- Default
false
render
ReactElement | function
ReactElement | function
- Name
- Description
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.- Type
| ReactElement
| ((props: HTMLProps, state: ScrollArea.Scrollbar.State) => ReactElement)
data-orientation
Indicates the orientation of the scrollbar.
data-hovering
Present when the pointer is over the scroll area.
data-scrolling
Present when the users scrolls inside the scroll area.
--scroll-area-thumb-height
The scroll area thumb's height.
--scroll-area-thumb-width
The scroll area thumb's width.
Thumb
The draggable part of the the scrollbar that indicates the current scroll position.
Renders a <div>
element.
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: ScrollArea.Thumb.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
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.- Type
| ReactElement
| ((props: HTMLProps, state: ScrollArea.Thumb.State) => ReactElement)
data-orientation
Indicates the orientation of the scrollbar.
Corner
A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
Renders a <div>
element.
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: ScrollArea.Corner.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
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.- Type
| ReactElement
| ((props: HTMLProps, state: ScrollArea.Corner.State) => ReactElement)