Curved Scrollbar

A scrollbar that finally matches your card design

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.

What makes this different from other

You build your card directly on the Framer canvas with real layers, real content, and full control then the curved scrollbar effect applies on top of it.

There are:

• No pre-built card templates

• No locked structures

• No limitations on what your card can contain

Instructions

• 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.

How It Works

The component provides 14 controls grouped into four sections for precise scrollbar styling.

Properties Control

1. Bar (Thumb)

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.

2. Track

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.

3. Drag Scaling

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.

4. Shape

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 rounded scrollbar path of the border radius scrollbar.

Features

• Gradient support for thumb and track

• Automatic border-radius detection from the card

• True round 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.

Use Cases

• Portfolio cards with long descriptions

• Detailed Feature cards with curved corner scrollbar

• 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 heysoyebali@gmail.com