Scroll area.

More content, within the same frame.

In practice

Give the root a height. Compose Viewport and Content. Scrolling uses native scrollbars.

Installation

Install Coal once. Components and TypeScript declarations are included. React 19 and React DOM 19 are peer dependencies.

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

This installs the local package. It is not yet published on npm. See installation for stylesheet setup and integration.

Usage

"use client";
import * as React from "react";
import "@chlohal/coal-ui/styles.css";
import { ScrollArea, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaThumb } from "@chlohal/coal-ui";
export default function Example() {
    return (<ScrollArea>
          <ScrollAreaViewport>
            <ScrollAreaContent>
              {[
            "Make it simple.",
            "Make it useful.",
            "Make it personal.",
            "Leave some space.",
            "Mind the details.",
            "Less, but considered.",
            "Make it yours.",
        ].map((s) => (<p key={s}>
                  {s}
                </p>))}
            </ScrollAreaContent>
          </ScrollAreaViewport>
          <ScrollAreaScrollbar>
            <ScrollAreaThumb />
          </ScrollAreaScrollbar>
        </ScrollArea>);
}

Source

The original Coal implementation. Use the package export to integrate it.

import * as React from "react";
import { cn } from "./internal.js";
export function ScrollArea({
  className,
  ...props
}: React.ComponentPropsWithRef<"div">) {
  return <div className={cn("coal-scroll-area", className)} {...props} />;
}
export function ScrollAreaViewport({
  className,
  ...props
}: React.ComponentPropsWithRef<"div">) {
  return (
    <div
      tabIndex={0}
      role="region"
      aria-label="Scrollable content"
      className={cn("coal-scroll-viewport", className)}
      {...props}
    />
  );
}
export function ScrollAreaContent(props: React.ComponentPropsWithRef<"div">) {
  return <div {...props} />;
}
// The native scrollbar provides dragging, touch and platform accessibility.
export function ScrollAreaScrollbar(
  _props: React.ComponentPropsWithRef<"div">,
) {
  void _props;
  return null;
}
export function ScrollAreaThumb(_props: React.ComponentPropsWithRef<"div">) {
  void _props;
  return null;
}

Accessibility checklist

• Provide an accessible name for controls, including icon-only buttons.
• Check keyboard navigation, visible focus and disabled states in your application.
• Do not rely on color alone to communicate status.