normal
accent
muted
primary
secondary
card
popover
input
chart-1
chart-2
chart-3
chart-4
chart-5
text-foreground - Primary text
text-muted-foreground - Secondary text
text-primary - Primary color text
text-secondary-foreground - Secondary color text
text-accent-foreground - Accent color text
text-destructive - Destructive/error text
rounded-sm
rounded-md
rounded-lg
rounded-xl
shadow-sm
Small shadow
shadow-md
Medium shadow
shadow-lg
Large shadow
The scrollbar below should work with scroll wheel, touch, and drag interactions. It uses your custom CSS variables for theming.
Custom Scrollbar Demo
This container demonstrates the custom scrollbar styling.
✅ Scroll wheel: Should work normally
✅ Touch scroll: Should work on mobile/trackpad
✅ Drag scrollbar: Click and drag the scrollbar thumb
Scrollbar Features:
--scrollbar-track--scrollbar-thumb🎨 Customization: Edit the CSS variables in globals.css
📱 Mobile: Uses momentum scrolling on iOS
🖱️ Desktop: Custom styled scrollbar with hover effects
📜 More content to make this scrollable...
🔄 Keep scrolling to test the scrollbar...
⚡ The scrollbar should be smooth and responsive...
🖱️ Try different input methods...
🎯 Mouse wheel, trackpad, touch, drag...
✨ All should work seamlessly...
🚀 This container should capture scroll events...
📊 Content continues below...
🎨 Custom scrollbar styling active...
🔧 Hover over scrollbar to see effects...
📱 Touch scrolling enabled...
⌨️ Keyboard navigation works too...
🎪 More content for testing...
🌟 Scroll wheel should work in this box...
🎭 Not on the main page...
🎨 Custom colors from CSS variables...
🔥 Almost at the end...
🎉 End of scrollable content!