Components

ScrollArea

A scrollable region with thin themed scrollbars and fading edges.

Storybook: Storybook
Source: Source

When to use

ScrollArea is for content that must scroll inside a fixed-size area: a long menu in the sidebar, an activity list in a card, a horizontal strip of tags. The page layout stays put; only the area scrolls.

When not to use

For the whole page: Let the page use the browser’s own scrolling; do not wrap the page in a ScrollArea.
For lists of thousands of rows: Use a virtual list; ScrollArea renders every item.
For short content: If the content fits, do not force the area to a fixed size.

Anatomy

List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
List item 7
List item 8
List item 9
List item 10
List item 11
List item 12
List item 13
List item 14
List item 15
List item 16
List item 17
List item 18
List item 19
List item 20

import { Provider, ScrollArea } from '@bigbang/ui';

export default function Vertical() {
  return (
    <Provider locale="en-GB">
      <div className="h-60 w-72 rounded-md border border-line-subtle">
        <ScrollArea label="Item list">
          <ul className="m-0 grid list-none gap-sm px-md py-sm">
            {Array.from({ length: 20 }, (_, index) => (
              <li key={index}>List item {index + 1}</li>
            ))}
          </ul>
        </ScrollArea>
      </div>
    </Provider>
  );
}

Root: Takes the size you give it; carries the edge fade variables.
Viewport: The element that scrolls; it is in the tab order and becomes a named region with label.
Scrollbar: A thin track and a round thumb; drawn only when the content overflows.
Edge fade: Content fades at an edge that hides more content.

Behaviour

Wheel, touch and keyboard use the browser’s native scrolling; behaviour does not change.
The viewport takes focus: arrow keys, Page Up, Page Down, Home, End and Space scroll it.
Scrollbars are hidden at rest; they appear while the pointer is over the area or it scrolls.
When the area reaches its end the page does not scroll (overscroll-behavior: contain).
An edge fades only while there is hidden content in that direction.

Guidelines

Give the area a size (className or its container); the area fills it.
Do not nest scrolling areas on one page.
Give a label that says what the area holds, especially when a page has several areas.
Do not put the only action at the very edge of the area; the fade can dim it.

Content

label is a short noun phrase: “Activity list”, “Tags”.

Turkish	English
Öğe listesi	Item list
Etkinlik listesi	Activity list
Etiketler	Tags

Tabs: Long tab lists scroll sideways on their own.
AppShell: The sidebar menu scrolls inside a ScrollArea.
Accordion: Splits long content into sections instead of scrolling it.