Package Exports

react-smart-scrollbar
react-smart-scrollbar/dist/index.es.js
react-smart-scrollbar/dist/index.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-smart-scrollbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🌟 react-smart-scrollbar

A blazing fast, lightweight, and fully customizable React scrollbar solution that supports vertical and horizontal scrollbars with zero extra DOM elements. No wrappers, no BS — just powerful styling.

🚀 Features

✅ Custom vertical and horizontal scrollbar support
✅ 1px thin scrollbars (pixel-perfect)
✅ Fully configurable with colors, width, radius
✅ No extra elements — uses existing DOM only
✅ Arrow buttons removed on all platforms (Windows, Chrome, Firefox, etc.)
✅ Plug-and-play React component
✅ Ultra-lightweight (~1KB)

📦 Installation

npm install react-smart-scrollbar

🧠 Usage Basic Example

import { SmartScrollbar } from 'react-smart-scrollbar';

<SmartScrollbar
  verticalConfig={{
    thumbColor: '#ff0000',
    trackColor: '#ffe6e6',
    width: '6px',
    radius: '8px',
  }}
  horizontalConfig={{
    thumbColor: '#00bcd4',
    trackColor: '#e0f7fa',
    height: '6px',
    radius: '8px',
  }}
>
  <div style={{ height: 300, overflow: 'auto', whiteSpace: 'nowrap' }}>
    {/* Scrollable content */}
  </div>
</SmartScrollbar>

⚙️ Configuration Prop Type Description verticalConfig object Customize vertical scrollbar horizontalConfig object Customize horizontal scrollbar

Config Options Key Type Description thumbColor string Scroll thumb color trackColor string Scroll track background color width string Vertical scrollbar width (px) height string Horizontal scrollbar height (px) radius string Scroll thumb border radius

🛑 Leave verticalConfig or horizontalConfig empty {} to disable that scrollbar.

💡 Advanced 🎯 Support 1px ultra-thin scrollbars

🚫 Removes native scrollbar arrows across all browsers

🎨 Use dynamic themes (dark/light) with config

🧪 Works perfectly with Vite, Next.js, CRA