Scroll Area

A custom scrollable area component with styled scrollbars.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Anatomy

<ScrollArea.Root>
  <ScrollArea.Viewport>
    <ScrollArea.Content />
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar>
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>

Required style

It's important to note that the scroll area requires the following styles on the ScrollArea.Viewport element to hide the native scrollbar:

[data-scope='scroll-area'][data-part='viewport'] {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

Examples

Basic

Create a basic scrollable area with custom scrollbar.

Horizontal

Configure the scroll area for horizontal scrolling only.

Both Directions

Enable scrolling in both horizontal and vertical directions.

Nested

Scroll areas can be nested within each other for complex layouts.

API Reference

Props

Root

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`ids`		`Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string }>` The ids of the scroll area elements

Attribute	Description
`[data-scope]`	scroll-area
`[data-part]`	root
`[data-overflow-x]`	Present when the content overflows the x-axis
`[data-overflow-y]`	Present when the content overflows the y-axis

CSS Variable	Description
`--corner-width`	The width of the Root
`--corner-height`	The height of the Root
`--thumb-width`	The width of the slider thumb
`--thumb-height`	The height of the slider thumb

Content

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	scroll-area
`[data-part]`	content
`[data-overflow-x]`	Present when the content overflows the x-axis
`[data-overflow-y]`	Present when the content overflows the y-axis

Corner

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	scroll-area
`[data-part]`	corner
`[data-hover]`	Present when hovered
`[data-state]`	"hidden" \| "visible"
`[data-overflow-x]`	Present when the content overflows the x-axis
`[data-overflow-y]`	Present when the content overflows the y-axis

RootProvider

Renders a <div> element.

Prop	Default	Type
`value`		`UseScrollAreaReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Scrollbar

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`orientation`		`Orientation`

Attribute	Description
`[data-scope]`	scroll-area
`[data-part]`	scrollbar
`[data-orientation]`	The orientation of the scrollbar
`[data-scrolling]`	Present when scrolling
`[data-hover]`	Present when hovered
`[data-dragging]`	Present when in the dragging state
`[data-overflow-x]`	Present when the content overflows the x-axis
`[data-overflow-y]`	Present when the content overflows the y-axis

Thumb

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	scroll-area
`[data-part]`	thumb
`[data-orientation]`	The orientation of the thumb
`[data-hover]`	Present when hovered
`[data-dragging]`	Present when in the dragging state

Viewport

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	scroll-area
`[data-part]`	viewport
`[data-at-top]`	Present when scrolled to the top edge
`[data-at-bottom]`	Present when scrolled to the bottom edge
`[data-at-left]`	Present when scrolled to the left edge
`[data-at-right]`	Present when scrolled to the right edge
`[data-overflow-x]`	Present when the content overflows the x-axis
`[data-overflow-y]`	Present when the content overflows the y-axis

Context

API

Property	Type
`isAtTop`	`boolean` Whether the scroll area is at the top
`isAtBottom`	`boolean` Whether the scroll area is at the bottom
`isAtLeft`	`boolean` Whether the scroll area is at the left
`isAtRight`	`boolean` Whether the scroll area is at the right
`hasOverflowX`	`boolean` Whether the scroll area has horizontal overflow
`hasOverflowY`	`boolean` Whether the scroll area has vertical overflow
`getScrollProgress`	`() => Point` Get the scroll progress as values between 0 and 1
`scrollToEdge`	`(details: ScrollToEdgeDetails) => void` Scroll to the edge of the scroll area
`scrollTo`	`(details: ScrollToDetails) => void` Scroll to specific coordinates
`getScrollbarState`	`(props: ScrollbarProps) => ScrollbarState` Returns the state of the scrollbar