DOCSEARCHbyAlgolia
Submit Docs

Lina ScrollArea

repository·main·Indexed 43 days ago

https://github.com/sameerjs6/lina

A drop-in replacement for shadcn/ui's ScrollArea version 1.0.0, featuring adaptive edge masks, native touch optimization for mobile devices, and micro-interactions for desktop scrollbars. It maintains API compatibility with shadcn/ui props and slots and supports both Radix and Base UI primitives.

Tokens
896
Snippets
3
Records
4
Agent score
6%

What's inside Lina

  1. What is Lina and its key features?

    main

    Lina is an adaptive scroll area designed for modern UIs. It is a responsive replacement for shadcn/ui's ScrollArea that focuses on a native feel across different input methods.

    Key features include:

    • Adaptive mask: Subtle edge fades that appear only when content is scrollable and adapt to scroll position, axis, and container shape.
    • Micro-interactions: Hover/press effects for the custom scrollbar on desktop devices.
    • Native touch optimization: Uses appropriate touch-action, momentum scrolling, and passive listeners for a native feel on iOS/Android.
    • Drop-in replacement: Matches shadcn/ui's ScrollArea API (props, slots, and className).
    • Primitive variants: Supports both Radix and Base UI primitives while maintaining a consistent API.

  2. Install Lina via shadcn CLI

    main

    Lina can be added to your project using the shadcn CLI. This installs the component directly into your components directory, allowing it to function as a drop-in replacement for existing scroll area components.

    npx shadcn@latest add https://lina.sameer.sh/r/lina-radix.json

  3. Use the Lina ScrollArea component

    main

    Lina's ScrollArea is designed as a drop-in replacement for shadcn/ui's ScrollArea. It accepts the same props, slots, and className ergonomics. It provides an adaptive mask that fades edges based on scroll position and native touch optimization for mobile devices.

    import { ScrollArea } from "@/components/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>
  );
}

  4. Merge Tailwind CSS classes with cn()

    main

    The cn utility function is used to conditionally join CSS class names and resolve Tailwind CSS class conflicts. It combines clsx for conditional logic and tailwind-merge to ensure that the last class applied in the arguments takes precedence in the final output, preventing style collisions.

    Use this function whenever you need to pass dynamic classes to a component or merge multiple Tailwind utility strings.

    import { cn } from "./lib/utils";

// Example usage:
const className = cn("px-2 py-1", "bg-red-500", isActive && "text-white", "px-4");
// Result will resolve Tailwind conflicts (e.g., px-4 will override px-2)