A modern, sleek, and intuitive React-based web application for designing and customizing beautiful scrollbars in real-time. Create stunning scrollbar styles that apply globally across your entire website with live preview functionality.
- Real-time Global Scrollbar Updates - See your changes instantly applied across the entire application
- Live CSS Injection - Dynamic styling updates without page refresh
- Comprehensive Customization - Control every aspect of your scrollbar design
- Colors: Thumb color, track color, and hover effects
- Dimensions: Width, height, and border radius controls
- Visibility: Auto, hidden, or always visible modes
- Advanced Styling: Fine-tune every detail of your scrollbar
- 10 Beautiful Presets - Including Dark Mode, Neon, Glassmorphism, Ocean Breeze, Cyberpunk, and more
- Randomize Feature - Generate creative scrollbar designs for inspiration
- Code Export - Get CSS, SCSS, or JavaScript code snippets
- Local Storage - Automatically save your configurations
- Responsive Design - Works perfectly on all device sizes
- Light/Dark Mode Toggle - Seamless theme switching
- Glassmorphism UI - Modern frosted glass design elements
- Smooth Animations - Powered by Framer Motion
- Clean Typography - Using Inter, Sora, and Manrope fonts
- Node.js (v18 or higher)
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd scrollbar-customizer- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run build- React 18 - Modern React with hooks
- TypeScript - Type-safe development
- Vite - Fast build tool and development server
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Smooth animations and transitions
- Lucide React - Beautiful icons
src/
├── components/ # React components
│ ├── ColorPicker.tsx # Color selection component
│ ├── Controls.tsx # Main control panel
│ ├── Presets.tsx # Preset selection
│ ├── CodeExport.tsx # Code generation and export
│ ├── Styles.tsx # Advanced styling options
│ └── TabNavigation.tsx # Tab navigation
├── hooks/ # Custom React hooks
│ └── useScrollbarConfig.ts # Scrollbar state management
├── types/ # TypeScript definitions
│ └── index.ts # Type definitions
├── utils/ # Utility functions
│ ├── presets.ts # Predefined scrollbar presets
│ └── scrollbar.ts # Scrollbar utility functions
├── App.tsx # Main application component
├── main.tsx # Application entry point
└── index.css # Global styles and CSS variables
- Default - Clean and minimal
- Dark Mode - Perfect for dark themes
- Neon - Electric and vibrant
- Glassmorphism - Translucent and modern
- Ocean Breeze - Calm and refreshing
- Cyberpunk - Futuristic and bold
- Sunset - Warm and inviting
- Forest - Natural and earthy
- Lavender - Soft and elegant
- Invisible - Minimal and hidden
The application uses CSS custom properties (CSS variables) combined with ::-webkit-scrollbar pseudo-elements to create custom scrollbar styles. The styles are applied globally using document.documentElement.style.setProperty() for real-time updates.
- Chrome/Chromium (full support)
- Safari (full support)
- Firefox (partial support - basic styling)
- Edge (full support)
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
Created with ❤️ to make your scroll smooth.
Make your websites stand out with beautiful, custom scrollbars that enhance user experience and add that extra touch of polish to your designs.