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

// @example Long text | Works for prose as well as lists.
export default function ScrollAreaLongTextDemo() {
  return (
    <div style={{ width: 360 }}>
      <ScrollArea maxHeight={140}>
        <Text size="sm" secondary as="p" style={{ margin: 0 }}>
          Refund runbook. Check the Stripe subscription before anything else. If
          the customer was charged for a plan they had already left, credit the
          difference. Credits up to $100 can go out straight away. Anything
          larger waits for Priya Nair. Always reply in the original Intercom
          conversation, and link the Linear issue if the cause is a bug. Close
          the ticket only after the customer confirms the invoice looks right.
          If they do not reply within three days, send one reminder and then
          mark the ticket as resolved.
        </Text>
      </ScrollArea>
    </div>
  );
}