Most scrollbars ignore your UI. You carefully design rounded cards and polished layouts — then the default browser scrollbar shows up as a straight, boxy strip and breaks the look.
Curved Scrollbar fixes that. It replaces the native scrollbar with a smooth, curved, styled scrollbar that hugs your card’s border radius and feels like part of the component itself. Drop it into any scrollable container and get a clean, modern card scrollbar that matches your design automatically.
This is a purpose-built custom scrollbar for Framer that follows corners, supports gradients, and includes draggable interaction - without external libraries or complex setup.
Copy and paste the Curved Scrollbar component into your Framer project
Place it inside any scrollable card or container/frame - it automatically detects the nearest scrollable ancestor
Change the the component position to "absolute"
Use the right-hand panel to customize colors, gradient, width, padding, and draggable behavior
Open Preview to see the corner scrollbar in action
If the position looks off after the customisation, cut and re-paste the component to refresh detection
No code and no manual wiring required.
The component provides 14 controls grouped into four sections for precise scrollbar styling.
Controls the draggable scrollbar thumb.
Bar Color : solid color or scrollbar gradient at rest
Bar Color (Dragging) : color while dragging
Bar Width : thickness in pixels
Bar Ends : Round or Flat tip shape
This defines the visible draggable scrollbar element users interact with.
Controls the rail path the thumb moves along.
Track Color : background rail color (can be transparent)
Track Color (Dragging) : rail color during drag
Track Width : rail thickness
You can hide the track entirely for a minimal stylish scrollbar look.
Optional tactile feedback during interaction.
Grow on Drag : toggle thickness growth while dragging
Bar Width (Dragging) : active thumb thickness
Track Width (Dragging) : active rail thickness
Adds a subtle interactive feel to the styled scrollbar.
Controls how tightly the scrollbar follows the card corner.
Padding : distance from card edge
Corner Hug : how closely the path wraps the radius
Smoothness : curve resolution around corners
These controls shape the curved path of the border radius scrollbar.
Gradient support for thumb and track
Automatic border-radius detection from the card
True curved scrollbar path around corners
Fully draggable scrollbar thumb
Round or flat tip styles
Optional grow-on-drag feedback
Real-time panel updates while adjusting sliders
Responsive recalculation on resize
Zero dependencies - pure SVG + React
Built specifically as a custom scrollbar Framer component for production layouts.
Portfolio cards with long descriptions
Detailed Feature cards
Chat and feed-style containers
Testimonial and review cards
Documentation side panels
Any rounded Framer card where a default scrollbar looks out of place
Made with ❤️ by Soyeb
Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.
Have questions or need a custom Framer component? Reach out at creator.nitso@gmail.com
Soyeb
