StorybookGitHub

Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/scroll-area.json

Usage

Use for overflow content with styled scrollbars. Constrain the root height (or width for horizontal).

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

export function Example() {
  return (
    <ScrollArea className="h-72 w-48 rounded-md border">
      <div className="p-4">
        {Array.from({ length: 50 }).map((_, i) => (
          <div key={i} className="text-sm">
            Item {i + 1}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

Vertical and horizontal scrollbars are included. Constrain size so overflow appears.