Scroll Area

Component

About

A themeable scrollable container that clips its content to a max height and shows a thin scrollbar, used for scrollable lists, logs, or long text blocks.

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";
import { ListItem } from "@/components/ui/scroll-area-utils/demo-helpers";

// @example Default | Content taller than 200px scrolls inside the area.
export default function ScrollAreaDemo() {
  const customers = [
    "Acme",
    "Lumen Labs",
    "Fjord Health",
    "Brightline",
    "Cobalt Dental",
    "Acme (sandbox)",
    "Lumen Labs (EU)",
  ];
  return (
    <div style={{ width: 320 }}>
      <ScrollArea>
        {customers.map((customer) => (
          <ListItem key={customer} title={customer} />
        ))}
      </ScrollArea>
    </div>
  );
}