Scroll Area

Augments native scroll functionality for custom, cross-browser styling. Optionally applies shadows when content overflows on scroll.

Live Examples

Features

• Large-dependencies free.
• Supports vertical, horizontal, and both orientations.
• Fully unstyled and customizable.
• RTL support.
• Keyboard support.

Requirements

• react >= 18.0.0

Installation

npm install @blur-ui/scroll-area

or

yarn add @blur-ui/scroll-area

Usage

const scrollAreaClassnames: ScrollAreaClassnames = {
  root: 'w-60 h-60',
  scrollbar: 'p-[1px]',
  verticalScrollbar: 'w-2.5',
  horizontalScrollbar: 'h-2.5',
  thumb: 'bg-neutral-100 rounded-full',
};

<ScrollArea classNames={scrollAreaClassnames}>
  <p>Lorem ...</p>
</ScrollArea>;

Props

ScrollArea

| Prop Name | Type | Default | Description | |------------------------|----------------------------------------------|-------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------| | viewportProps | ScrollAreaViewportProps | undefined | Props to pass to the viewport element, including a ref to the DOM element. | | scrollbarProps | ScrollAreaScrollbarProps | undefined | Props to customize the scrollbar. | | verticalScrollbarProps | ScrollAreaScrollbarProps | undefined | Props to customize the vertical scrollbar specifically. | | horizontalScrollbarProps | ScrollAreaScrollbarProps | undefined | Props to customize the horizontal scrollbar specifically. | | thumbProps | ScrollAreaThumbProps | undefined | Props to customize the scrollbar thumb. | | verticalThumbProps | ScrollAreaThumbProps | undefined | Props to customize the vertical scrollbar thumb specifically. | | horizontalThumbProps | ScrollAreaThumbProps | undefined | Props to customize the horizontal scrollbar thumb specifically. | | cornerProps | ScrollAreaCornerProps | undefined | Props to customize the scrollbar corner element. | | classNames | ScrollAreaClassNames | undefined | An object to override default class names for various parts of the ScrollArea component. | | disableShadow | boolean | false | If true, disables the scroll shadow effect. | | shadowSize | number | 40 | The size of the shadow in pixels applied when content overflows. | | orientation | 'vertical' \| 'horizontal' \| 'both' | 'vertical'| Determines the scroll orientation. Can be vertical, horizontal, or both. | | ref | React.Ref<HTMLDivElement> | undefined | A ref to access the root DOM element of the ScrollArea. | | children | React.ReactNode | undefined | The content to be displayed within the ScrollArea. | | offset | number | 0 | The offset used in calculating the scroll shadow visibility. | | visibility | 'auto' \| 'visible' \| 'hidden' | 'auto' | Controls the visibility behavior of the scroll shadows. | | onVisibilityChange | (visible: boolean) => void | undefined | Callback function invoked when the visibility of the scroll shadows changes. |

classNames Object

| Class Name Key | Description | |-------------------------|------------------------------------------------------| | root | Class name for the root ScrollArea element. | | viewport | Class name for the viewport area. | | scrollbar | Class name for the scrollbar container. | | verticalScrollbar | Class name for the vertical scrollbar. | | horizontalScrollbar | Class name for the horizontal scrollbar. | | thumb | Class name for the scrollbar thumbs. | | verticalThumb | Class name for the vertical scrollbar thumb. | | horizontalThumb | Class name for the horizontal scrollbar thumb. | | corner | Class name for the scrollbar corner element. |

Credits

Radix UI Scroll Area | Hero UI ScrollShadow