NexoreUI
InstallationComponentsNexore MakeGitHub
GitHub
NexoreUIv0.1.2

Getting Started

Installation

Components

ButtonInputCardBadgeAlertAvatarAccordionModal / DialogTooltipTabsProgressSkeletonSliderSwitchRatingCommandTableStepperScroll AreaFile UploadNavigationIconsDock

Pro

ChartsData DisplayDark Mode ToolkitCommerceCookie ConsentSocialPremium EffectsLoaders

Animated

MarqueeNumber TickerAnimated NumberTyping AnimationBlur FadeBox RevealFile Preview CardImage Compare
MIT License
DocsScroll Area

Scroll Area

Custom scrollable areas with styled scrollbars.

Next ComponentFile Upload

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

ScrollArea Playground
nexoreui
Live Preview
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
Props Panel
select

Scrollbar visibility trigger type

number

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

Generated Code
Open in GitHub
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.