Scrollarea

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download scroll-area -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { ScrollArea } from "@/components/ui/scroll-area";
<ScrollArea style={{ height: 240, width: 300 }}>
  <div className="space-y-4 p-4">
    {Array.from({ length: 30 }, (_, i) => (
      <p key={i}>Scrollable item {i + 1}</p>
    ))}
  </div>
</ScrollArea>;

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

• ScrollBar

Examples

Default

import { ScrollArea } from "@/components/ui/scroll-area";
import * as React from "react";
const tags = Array.from({ length: 50 }).map((_, i) => `v1.2.0-beta.${50 - i}`);
<ScrollArea
  className="h-72 w-48 rounded-md border border-neutral-mid"
  
>
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
    {tags.map((tag) => (
      <React.Fragment key={tag}>
        <div className="text-sm">{tag}</div>
        <div className="my-2 h-px bg-neutral-subtle" />
      </React.Fragment>
    ))}
  </div>
</ScrollArea>;

Horizontal

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
const figures = Array.from({ length: 8 }).map((_, i) => ({
  id: i + 1,
  artist: `Artist ${i + 1}`,
}));
<ScrollArea className="w-96 whitespace-nowrap rounded-md border border-neutral-mid">
  <div className="flex w-max space-x-4 p-4">
    {figures.map((figure) => (
      <figure key={figure.id} className="shrink-0">
        <div className="overflow-hidden rounded-md">
          <div className="flex h-40 w-32 items-center justify-center bg-neutral-subtle text-sm">
            {figure.id}
          </div>
        </div>
        <figcaption className="pt-2 text-xs text-neutral-mid">
          Photo by{" "}
          <span className="font-semibold text-neutral-strong">
            {figure.artist}
          </span>
        </figcaption>
      </figure>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

This component adds no props of its own to Base UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.