Scroll Area

Component 17

About

A customizable scroll area component with smooth scrolling and accessible scrollbars.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Area to your project and fits it to your theme.

Code

How Scroll Area is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function DemoOne() {
  return (
    <div className="max-w-sm w-full">
      <ScrollArea className="h-72 w-full rounded-md border border-border p-4">
        <div className="space-y-4">
          {Array.from({ length: 50 }).map((_, i) => (
            <div
              key={i}
              className="text-sm text-foreground p-2 rounded bg-accent"
            >
              Item {i + 1}: This is a scrollable item with some content
            </div>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}