NexoreUIv1.4
InstallationComponents41IconsNexore MakeAI
Create ProjectSTUDIOGitHub
NexoreUI
41 comps
Create Project
Studio
Installation
Components Overview
40+
Icons
300+
Categories6 groups
Button
Input
Switch
Slider
Rating
File Upload
Card
Accordion
Tabs
Table
Stepper
Scroll Area
Navigation
Dock
Data Display
Thinking Indicator
AI
Tool Call Card
AI
Agent Status Pill
AI
Command
Theme: indigo
Studio
DocsScroll Area

Scroll Area

Custom scrollable areas with styled scrollbars.

NextNavigation
On This Page
Quick Actions
Project Studio
New
Nexore Make (AI)Source on GitHub

Scroll Area

Custom scrollbar styling with touch support, auto-hiding behavior, and cross-browser consistency.

When to use

vertical scrollDisplaying long lists, configuration logs, or documents within constrained dashboard components
horizontal scrollNavigating a horizontal series of cards, photo carousels, or table cells on mobile layouts
always visibleEnsuring users recognize that additional details exist below fold (e.g. Terms of Service scrolls)
slow hide delayProviding users more time to target the scrollbar thumb before it fades away from view

Interactive Playground

Live CanvasInteractive
Interactive Demo

Scroll down to see the customizable scrollbar behaviors.

v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
v1.2.0-beta.37
v1.2.0-beta.36
v1.2.0-beta.35
v1.2.0-beta.34
v1.2.0-beta.33
v1.2.0-beta.32
v1.2.0-beta.31
v1.2.0-beta.30
v1.2.0-beta.29
v1.2.0-beta.28
v1.2.0-beta.27
v1.2.0-beta.26
v1.2.0-beta.25
v1.2.0-beta.24
v1.2.0-beta.23
v1.2.0-beta.22
v1.2.0-beta.21
v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1
Controls(2)
type
select

Scrollbar visibility trigger type

scrollHideDelay
number

Delay in milliseconds before scrollbar hides (only for type 'scroll' or 'hover')

Generated JSX
Source
import { ScrollArea } from "nexoreui"

<ScrollArea />

Default Vertical Scroll

Versions
v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
v1.2.0-beta.37
v1.2.0-beta.36
v1.2.0-beta.35
v1.2.0-beta.34
v1.2.0-beta.33
v1.2.0-beta.32
v1.2.0-beta.31
v1.2.0-beta.30
v1.2.0-beta.29
v1.2.0-beta.28
v1.2.0-beta.27
v1.2.0-beta.26
v1.2.0-beta.25
v1.2.0-beta.24
v1.2.0-beta.23
v1.2.0-beta.22
v1.2.0-beta.21
v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1
component.tsx

Horizontal Scrolling Layout

U0
User 0
U1
User 1
U2
User 2
U3
User 3
U4
User 4
U5
User 5
U6
User 6
U7
User 7
U8
User 8
U9
User 9
component.tsx

Always Visible Scrollbar

Important Agreement Details

By utilizing the components and assets provided in this framework, you agree to all terms of service. The library remains open-source under MIT, but premium elements are subject to proprietary limits. Ensure compliance with modern styling design systems before deployment.

component.tsx

Slow Auto-Hide Scrollbar

Hover to reveal scrollbar

Scroll this area using your mouse or trackpad, then move the mouse away. The scrollbar will slowly fade out after a 3000ms delay.

component.tsx

Short Custom Height

v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
component.tsx

ScrollArea Props

API Reference (Props)

PropTypeDefaultDescription
type"auto" | "always" | "scroll" | "hover""auto"Controls scrollbar visibility timing behavior.
scrollHideDelaynumber600Delay in milliseconds before scrollbar hides.
classNamestring—Additional custom class names.

ScrollBar Props

API Reference (Props)

PropTypeDefaultDescription
orientation"vertical" | "horizontal""vertical"The scrollbar orientation flow.
classNamestring—Additional custom class names.

♿ Accessibility (a11y)

  • Keyboard Scrolling: Navigable using keyboard focus and default arrow/page-up/page-down keys when container holds focus.
  • Radix Integration: Uses native browser scroll mechanisms behind the scenes for full screen-reader compliance and layout adaptability.