Scrollbar Customizer

1/* Custom Scrollbar Styles */
2/* For Webkit browsers (Chrome, Safari, Edge) */
3.custom-scrollbar::-webkit-scrollbar {
4  width: 10px;
5  height: 10px;
6}
7
8.custom-scrollbar::-webkit-scrollbar-track {
9  background: #f1f1f1;
10  border-radius: 5px;
11}
12
13.custom-scrollbar::-webkit-scrollbar-thumb {
14  background: #6366f1;
15  border-radius: 5px;
16}
17
18.custom-scrollbar::-webkit-scrollbar-thumb:hover {
19  background: #4f46e5;
20}
21
22/* For Firefox */
23.custom-scrollbar {
24  scrollbar-width: auto;
25  scrollbar-color: #6366f1 #f1f1f1;
26}

1/* Add to your globals.css */
2@layer utilities {
3  .scrollbar-custom {
4    scrollbar-width: auto;
5    scrollbar-color: #6366f1 #f1f1f1;
6  }
7
8  .scrollbar-custom::-webkit-scrollbar {
9    width: 10px;
10    height: 10px;
11  }
12
13  .scrollbar-custom::-webkit-scrollbar-track {
14    background: #f1f1f1;
15    border-radius: 5px;
16  }
17
18  .scrollbar-custom::-webkit-scrollbar-thumb {
19    background: #6366f1;
20    border-radius: 5px;
21  }
22
23  .scrollbar-custom::-webkit-scrollbar-thumb:hover {
24    background: #4f46e5;
25  }
26}
27
28/* Usage */
29<div className="scrollbar-custom overflow-y-auto h-64">
30  {/* Your content */}
31</div>