Scroll Area

Scroll Area is a scrollable container with consistent, cross-browser custom scrollbars.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/scroll-area.tsx

Import from@viliha/vui-react/scroll-area

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

Give it a fixed height/width; content beyond it scrolls with a styled bar.

scroll-area-demo.tsx

import { ScrollArea } from "@viliha/vui-react/scroll-area";

export function Example() {
  return (
    <ScrollArea className="h-72 w-48 rounded-md border">
      {/* long content */}
    </ScrollArea>
  );
}

ScrollArea props

It takes no props of its own. Everything you pass reaches the underlying ScrollAreaPrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

ScrollBar props

It takes no props of its own. Everything you pass reaches the underlying ScrollAreaPrimitive.ScrollAreaScrollbar primitive, so every attribute it accepts works here unchanged and nothing is invented on top.