Scroll Area

Component

About

A scrollable content box with a self-hiding overlay scrollbar, fading edges where there's more content, and a floating button that nudges the view down when more lies below.

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 type { CSSProperties } from "react";
import ScrollArea from "@/components/ui/scroll-area";

const rules: [string, string][] = [
  ["Wash your hands", "Before touching any manuscript, and again after lunch."],
  [
    "No ink at the desks",
    "Take notes in pencil or on your own tablet; ink stays in the copyists\u2019 room.",
  ],
  [
    "Turn pages from the corner",
    "Never from the spine: bindings from Baghdad are older than they look.",
  ],
  [
    "Ask before copying",
    "Copies of rare works are made by the house copyists, and credited to them.",
  ],
  [
    "Borrow for forty days",
    "Renew once from your reading list; bring the pledge you left when you return it.",
  ],
  [
    "Keep maps flat",
    "Al-Idrisi\u2019s sheets are stored flat and read on the long tables only.",
  ],
  [
    "Speak softly",
    "Debate belongs in the courtyard; the reading room is for reading.",
  ],
  [
    "Return by sunset",
    "The room closes at the evening call; lamps are not allowed near the shelves.",
  ],
  [
    "Report damage",
    "Tell a librarian at once. Nobody is fined for honest reporting.",
  ],
];

export default function ScrollAreaDemo() {
  return (
    <div
      style={
        {
          display: "grid",
          gap: "0.75rem",
          inlineSize: "min(100%, 26rem)",
        } as CSSProperties
      }
    >
      <h3
        style={
          {
            margin: 0,
            fontSize: "1rem",
            color: "var(--ui-fg)",
          } as CSSProperties
        }
      >
        Reading room rules
      </h3>
      <ScrollArea label="Reading room rules" maxHeight="15rem">
        <ol
          style={
            {
              display: "grid",
              gap: "0.75rem",
              margin: 0,
              paddingBlock: 0,
              paddingInline: "1.5rem 0.25rem",
              color: "var(--ui-muted)",
              fontSize: "0.875rem",
              lineHeight: 1.55,
            } as CSSProperties
          }
        >
          {rules.map(([title, body]) => (
            <li key={title}>
              <strong
                style={
                  { color: "var(--ui-fg)", fontWeight: 600 } as CSSProperties
                }
              >
                {title}.
              </strong>{" "}
              {body}
            </li>
          ))}
        </ol>
      </ScrollArea>
    </div>
  );
}