Shadcn UI Drop-in Replacement

The Adaptive Scroll Area for Modern UIs

A responsive scroll area that feels native on touch devices, offering custom styling and enhanced interactions where it matters most.

See it in Action Install Now

Micro Interactions

Polished interactions that enhance usability.

Refined micro-interactions including scrollbar fade effects, hover states, and thumb interactions for polished desktop experience.

Adaptive Mask

Dynamic masking that responds to content.

Automatic edge masks that appear and fade based on scroll position and direction, creating seamless visual boundaries.

Adaptive Scrollbars

Native experience that adapts to devices.

Automatic scrollbar adaptation between native and custom styles based on device type and touch capabilities.

#Installation

Add the adaptive scroll area component to your project with ease.

Quick Installation

Use the CLI to add the component to your project. This will automatically install all dependencies and copy the necessary files.

#Usage

Add the adaptive scroll area component to your project with ease.

import { ScrollArea } from "@/registry/radix-ui/scroll-area";

export default function Example() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the
      king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
      And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they
      couldn't help but laugh. And once they started laughing, they couldn't stop.
    </ScrollArea>
  );
}

#Why

Why did I create Lina in the first place?

The Problem

The main reason behind it was that custom scrollbar/scrollarea components looked amazing on desktop, but on mobile or general touch devices, the native scrollbars were just better, and I wanted to use those instead of a custom scrollbar.

From Quick Fix to Full Component

So I wrote a simple version back at the end of 2024 while working on one of our office projects. Fast forward to now, while building scrollable examples for Revola, I decided to turn that simple version into a full-fledged separate component. So I did.

The Details

The initial version of Lina only had micro-interactions and native scrollable adaptation. But then I started noticing the details that make interfaces feel premium.

While using v0, I spotted this smooth mask just above the chat input, content would fade in so elegantly. That visual caught my eye, and I knew I had to add it. These little touches make all the difference.

The Goal

"If wer’e going the custom ScrollArea route, why not make it look and feel purely custom, refined and detailed?."

That’s the philosophy behind Lina. No half-measures, no compromises, just a scrolling experience that feels intentionally well crafted.

#Examples

Explore various examples showcasing the capabilities of the Adaptive Scroll Area component.

Vertical Scroll Demo

Experience smooth vertical scrolling with customizable scrollbars, perfect for long content sections and lists.

Horizontal Scroll Demo

Implement elegant horizontal scrolling for carousels, galleries, and overflow content with intuitive controls.

Timezone Select Example

A customizable timezone select component demonstrating advanced scroll functionality with search and filtering capabilities.

Timezone select with search