Skip to content
earthlingUI
Components

Scroll Area

Provides a styled viewport while preserving native scrolling behavior.

Release notes

September 2026

  • Typography

    Adjusted display scale

  • Buttons

    Added loading behavior

  • Dialogs

    Improved focus return

  • Tables

    Aligned numeric columns

  • Motion

    Added reduced-motion fallbacks

  • Themes

    Refined dark surfaces

Playground

height

Sets this example's viewport height in pixels.

Usage

tsx
import { ScrollArea } from "earthling-ui/scroll-area";

export function Example() {
  return (
    <>
      <ScrollArea className="h-48">
        <p>Scrollable release notes and activity belong inside the viewport.</p>
      </ScrollArea>
    </>
  );
}
  • Give the viewport a constrained height or width; unconstrained content has no reason to scroll.
  • Keep important actions outside long scroll regions when possible.
  • The height control belongs to this example and is clamped between 160 and 320 pixels.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

bash
npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx
// Generated by dts-bundle-generator v9.5.1

import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import { ComponentProps } from 'react';

export declare function ScrollArea({ className, children, ...props }: ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react").JSX.Element;
export declare function ScrollBar({ className, orientation, ...props }: ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react").JSX.Element;

export {};

Runtime dependencies: @radix-ui/react-scroll-area, cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Scroll Area implementation
tsx
"use client";

import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { cn } from "@/utils/cn";
import type { ComponentProps } from "react";

function ScrollArea({
  className,
  children,
  ...props
}: ComponentProps<typeof ScrollAreaPrimitive.Root>) {
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn("relative", className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className="size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-outline"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  );
}

function ScrollBar({
  className,
  orientation = "vertical",
  ...props
}: ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      className={cn(
        "flex touch-none p-px select-none",
        orientation === "vertical" &&
          "h-full w-2.5 border-l border-l-transparent",
        orientation === "horizontal" &&
          "h-2.5 flex-col border-t border-t-transparent",
        className,
      )}
      {...props}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="relative flex-1 rounded-full bg-current/20 hover:bg-current/30"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  );
}

export { ScrollArea, ScrollBar };