🌟 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