ScrollArea

A component that provides custom scrollbars for overflowing content.

Usage

A compound component that provides a way to scroll content with custom-styled scrollbars.

import { ScrollArea } from "@elemnts-ui/react";

<ScrollArea.Root>
  <ScrollArea.Viewport>
    <ScrollArea.Content>{/* Your content here */}</ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Scrollbar orientation="horizontal">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>;

Variants

Control when scrollbars are shown using the variant prop: hover (default) displays them on hover, while always keeps them visible at all times.

Sizes

Use the size prop to adjust the scroll area. It controls scrollbar thickness and content padding.

Horizontal Scrolling

Horizontal scrolling is automatically enabled when the content exceeds the container's width.

RTL Support

The scroll area component fully supports Right-to-Left (RTL) languages like Arabic and Hebrew.

API Reference

ScrollArea

The root component for the scroll area.

Prop	Type	Default
ids	`Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string }>`	-
asChild	`boolean`	`false`

ScrollAreaRootProvider

Provides a scroll area context created with useScrollArea.

Prop	Type	Default
value	`UseScrollAreaReturn`	required
asChild	`boolean`	`false`

ScrollAreaViewport

The scrollable viewport.

Prop	Type	Default
asChild	`boolean`	`false`

ScrollAreaContent

The content container within the viewport.

Prop	Type	Default
asChild	`boolean`	`false`

ScrollAreaScrollbar

The scrollbar container.

Prop	Type	Default
orientation	`"horizontal" \| "vertical"`	-
asChild	`boolean`	`false`

ScrollAreaThumb

The draggable thumb within a scrollbar.

Prop	Type	Default
asChild	`boolean`	`false`

ScrollAreaCorner

The corner element displayed where horizontal and vertical scrollbars meet.

Prop	Type	Default
asChild	`boolean`	`false`

ScrollAreaContext

Accesses the scroll area state and methods.

Property	Type	Description
isAtTop	`boolean`	Whether the scroll area is at the top edge.
isAtBottom	`boolean`	Whether the scroll area is at the bottom edge.
isAtLeft	`boolean`	Whether the scroll area is at the left edge.
isAtRight	`boolean`	Whether the scroll area is at the right edge.
hasOverflowX	`boolean`	Whether the content overflows horizontally.
hasOverflowY	`boolean`	Whether the content overflows vertically.
getScrollProgress	`() => Point`	Returns the scroll progress for each axis as values between 0 and 1.
scrollToEdge	`(details: ScrollToEdgeDetails) => void`	Scrolls to an edge of the scroll area.
scrollTo	`(details: ScrollToDetails) => void`	Scrolls to specific coordinates.
getScrollbarState	`(props: ScrollbarProps) => ScrollbarState`	Returns a scrollbar's state.