Scroll Area

• Accordion
• Alert
• Avatar
• Badge
• Bubble
• Button
• Calendar
• Card
• Carousel
• Checkbox
• Dialog
• Divider
• Drawer
• Dropdown
• Field
• Input
• Label
• Link
• Menu
• Pagination
• PopOver
• Progress
• ProgressStepper
• Radio
• Resizable
• ScrollArea
• Select
• Skeleton
• Slider
• Spinner
• Stepper
• Switch
• SegmentedControl
• Tabs
• Tag
• Textarea
• Toast
• Tooltip

Contract

Overview

Machine-readable contract from Component Spec.

component: scroll-areaexport: ScrollAreaversion: 1attributes: data-refineui=scroll-area

Anatomy

Part	data-refineui
root	scroll-area
scrollbar	scroll-area-scrollbar
thumb	scroll-area-thumb
track	scroll-area-track
viewport	scroll-area-viewport

Variants

Axis	Values
type	hover, always

States

Scope	Category	Values
component	component	data-state: visible, hidden
component	environment	forced-colors, dir
scroll-area-scrollbar	component	data-state: visible, hidden

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { ScrollArea, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb } from "@refineui/react";

<ScrollArea>
  <div style={{ height: "400px" }}>
    {/* Long content */}
  </div>
</ScrollArea>

<ScrollArea type="always">
  <ScrollAreaViewport>
    {/* Custom viewport */}
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
  <ScrollAreaScrollbar orientation="horizontal">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

API Reference

ScrollArea

Prop	Default	Type	Description
type	"hover"	"hover" | "always"	When the custom scrollbar is visible.

ScrollAreaViewport

Viewport container (scrollable area).

ScrollAreaScrollbar

Prop	Default	Type	Description
orientation	"vertical"	"vertical" | "horizontal"	Scrollbar direction.

ScrollAreaThumb

Scrollbar thumb (draggable handle).