CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-radix-ui--react-scroll-area

A React component for creating accessible scroll areas with customizable scrollbars

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

index.mddocs/

Radix UI Scroll Area

A comprehensive React component for creating accessible scroll areas with customizable scrollbars. Built on Radix UI's accessibility-first design principles, it provides full control over scrollbar appearance and behavior while maintaining keyboard navigation, screen reader compatibility, and cross-browser consistency.

Package Information

  • Package Name: @radix-ui/react-scroll-area
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @radix-ui/react-scroll-area

Core Imports

import {
  ScrollArea,
  ScrollAreaViewport,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaCorner,
  createScrollAreaScope,
} from "@radix-ui/react-scroll-area";

CommonJS:

const {
  ScrollArea,
  ScrollAreaViewport,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaCorner,
  createScrollAreaScope,
} = require("@radix-ui/react-scroll-area");

Alternative imports using aliases:

import {
  Root,
  Viewport,
  Scrollbar,
  Thumb,
  Corner,
} from "@radix-ui/react-scroll-area";

Basic Usage

import React from "react";
import {
  ScrollArea,
  ScrollAreaViewport,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaCorner,
} from "@radix-ui/react-scroll-area";

function MyScrollArea() {
  return (
    <ScrollArea style={{ width: 300, height: 200 }}>
      <ScrollAreaViewport style={{ width: "100%", height: "100%" }}>
        <div style={{ padding: 16 }}>
          {/* Long content that exceeds the viewport */}
          {Array.from({ length: 50 }, (_, i) => (
            <div key={i} style={{ marginBottom: 8 }}>
              Item {i + 1}
            </div>
          ))}
        </div>
      </ScrollAreaViewport>
      <ScrollAreaScrollbar orientation="vertical">
        <ScrollAreaThumb />
      </ScrollAreaScrollbar>
      <ScrollAreaScrollbar orientation="horizontal">
        <ScrollAreaThumb />
      </ScrollAreaScrollbar>
      <ScrollAreaCorner />
    </ScrollArea>
  );
}

Architecture

Radix UI Scroll Area follows a compositional API pattern with distinct components:

  • Root Container: ScrollArea provides the context and coordination for all scrolling behavior
  • Viewport: ScrollAreaViewport defines the scrollable viewing area and manages overflow
  • Scrollbars: ScrollAreaScrollbar components handle both horizontal and vertical scrolling
  • Thumbs: ScrollAreaThumb represents the draggable handle within scrollbars
  • Corner: ScrollAreaCorner fills the space when both scrollbars are visible
  • Context System: Uses scoped contexts for component coordination and state management

Capabilities

Core Components

The fundamental building blocks for creating scroll areas with full compositional control over layout and behavior.

const ScrollArea: React.ForwardRefExoticComponent<
  ScrollAreaProps & React.RefAttributes<ScrollAreaElement>
>;

interface ScrollAreaProps extends React.ComponentPropsWithoutRef<"div"> {
  type?: "auto" | "always" | "scroll" | "hover"; // default: "hover"
  dir?: "ltr" | "rtl";
  scrollHideDelay?: number; // default: 600
}

const ScrollAreaViewport: React.ForwardRefExoticComponent<
  ScrollAreaViewportProps & React.RefAttributes<ScrollAreaViewportElement>
>;

interface ScrollAreaViewportProps extends React.ComponentPropsWithoutRef<"div"> {
  nonce?: string;
}

Core Components

Scrollbar System

Customizable scrollbar components that support multiple display modes, orientations, and accessibility features.

const ScrollAreaScrollbar: React.ForwardRefExoticComponent<
  ScrollAreaScrollbarProps & React.RefAttributes<ScrollAreaScrollbarElement>
>;

interface ScrollAreaScrollbarProps extends React.ComponentPropsWithoutRef<"div"> {
  orientation?: "horizontal" | "vertical";
  forceMount?: true;
}

const ScrollAreaThumb: React.ForwardRefExoticComponent<
  ScrollAreaThumbProps & React.RefAttributes<ScrollAreaThumbElement>
>;

interface ScrollAreaThumbProps extends React.ComponentPropsWithoutRef<"div"> {
  forceMount?: true;
}

Scrollbar System

Advanced Features

Corner handling, context management, and advanced configuration options for complex scroll area implementations.

const ScrollAreaCorner: React.ForwardRefExoticComponent<
  ScrollAreaCornerProps & React.RefAttributes<ScrollAreaCornerElement>
>;

interface ScrollAreaCornerProps extends React.ComponentPropsWithoutRef<"div"> {}

function createScrollAreaScope(): Scope;

Advanced Features

Types

type ScrollAreaElement = React.ComponentRef<"div">;
type ScrollAreaViewportElement = React.ComponentRef<"div">;
type ScrollAreaScrollbarElement = React.ComponentRef<"div">;
type ScrollAreaThumbElement = React.ComponentRef<"div">;
type ScrollAreaCornerElement = React.ComponentRef<"div">;

// Context scope type for nested scroll areas
type Scope = any;

// Component aliases
const Root: typeof ScrollArea;
const Viewport: typeof ScrollAreaViewport;
const Scrollbar: typeof ScrollAreaScrollbar;
const Thumb: typeof ScrollAreaThumb;
const Corner: typeof ScrollAreaCorner;

Install with Tessl CLI

npx tessl i tessl/npm-radix-ui--react-scroll-area

docs

advanced-features.md

core-components.md

index.md

scrollbar-system.md

tile.json