Scroll Area

DnD & Interaction

Custom scrollbar container.

Preview

Scrollable item 1

Scrollable item 2

Scrollable item 3

Scrollable item 4

Scrollable item 5

Scrollable item 6

Scrollable item 7

Scrollable item 8

Scrollable item 9

Scrollable item 10

Scrollable item 11

Scrollable item 12

Scrollable item 13

Scrollable item 14

Scrollable item 15

Usage

example.jsx

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

export default function Example() {
  return <ScrollArea />;
}

Source Code

Copy this file into components/ui/scroll-area.jsx in your project.

scroll-area.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const ScrollArea = forwardRef(({ className, children, ...props }, ref) => (
  <div ref={ref} className={cn("relative overflow-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent", className)} {...props}>
    {children}
  </div>
));
ScrollArea.displayName = "ScrollArea";

export { ScrollArea };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge