ScrollArea

A box with a scrollbar of its own. The browser's is drawn by the operating system: a different width on every machine and a different colour from the sheet it is cut into; this one is an element, so it is the same everywhere and made of the library's own tokens.

import { ScrollArea } from 'neba';

<ScrollArea height={200} fade>
  …
</ScrollArea>;

Props

Prop	Type	Default	Description
orientationshared	'vertical' | 'horizontal' | 'both'	'vertical'	Which axes may scroll. NebaOrientation plus a third value: 'both' means nothing anywhere else that type is used
height	number | string	—	A fixed height. A vertical scroll area has to be bounded by something or there is nothing to scroll. Numbers are pixels
maxHeight	number | string	—	The same, as a ceiling rather than a fixed height
fade	boolean	false	Fades the content out at each edge that has more beyond it, and only at those. A mask rather than a gradient over the content, so it works on a translucent surface
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Thickness of the rail. A scrollbar is not a control, so it has its own ladder well below the control heights
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	The family the thumb carries, mixed down so it does not read as a second column beside the text
children	ReactNode	—	What is scrolled

Every native <div> attribute passes through to the root, apart from color. Underneath it is an ordinary scroll container, so the wheel, the trackpad, momentum and the keyboard are the browser's own.

It is not ScrollZone, which is a rail: a strip of items laid out in one direction with buttons that step through them, for a row of cards or a line of chips. This is the plain case: a box too small for what is in it.

Examples

height · maxHeight

A vertical scroll area has to be bounded by something or there is nothing to scroll. height is a fixed one and maxHeight a ceiling; both take a number of pixels or any CSS length. A horizontal one is bounded by its container already.

orientation

vertical is the default. horizontal draws the rail along the bottom instead, and both draws both with a corner between them.

import { Box, Chip, ScrollArea } from 'neba';

const TAGS = [
  'react',
  'typescript',
  'tailwind',
  'base-ui',
  'design-system',
  'components',
  'accessibility',
  'esm',
  'tree-shaking',
  'dark-mode'
];

export default function ScrollAreaOrientation() {
  return (
    <Box variant="outline" className="w-full max-w-sm">
      <ScrollArea orientation="horizontal" fade>
        <div className="flex w-max items-center gap-2 pb-3">
          {TAGS.map((tag) => (
            <Chip key={tag} size="sm">
              {tag}
            </Chip>
          ))}
        </div>
      </ScrollArea>
    </Box>
  );
}

fade

Fades the content out at each edge that has more beyond it, and only at those edges, so there is no fade at the top when you are at the top. It is drawn as a mask rather than a gradient over the content, which is what lets it sit on a translucent surface.

import { Box, ScrollArea, Typography } from 'neba';

const LINES = Array.from({ length: 14 }, (_, index) => `Line ${index + 1}`);

export default function ScrollAreaFade() {
  return (
    <div className="grid w-full max-w-lg grid-cols-1 gap-4 sm:grid-cols-2">
      {[false, true].map((fade) => (
        <Box key={String(fade)} variant="outline">
          <Typography level="caption" className="mb-2 block">
            {fade ? 'fade' : 'no fade'}
          </Typography>
          <ScrollArea height={140} fade={fade}>
            <div className="flex flex-col gap-1 pe-3">
              {LINES.map((line) => (
                <Typography key={line} level="body">
                  {line}
                </Typography>
              ))}
            </div>
          </ScrollArea>
        </Box>
      ))}
    </div>
  );
}

size · color

size is the thickness of the rail: its own ladder, well below the control heights, because a scrollbar is a rail and not a control. color is the family the thumb carries, mixed down so it does not read as a second column beside the text.

import { Box, ScrollArea, Typography } from 'neba';

const sizes = ['xs', 'md', 'xl'] as const;
const LINES = Array.from({ length: 12 }, (_, index) => `Row ${index + 1}`);

export default function ScrollAreaSizes() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-3">
      {sizes.map((size) => (
        <Box key={size} variant="outline">
          <Typography level="caption" className="mb-2 block">
            {size}
          </Typography>
          <ScrollArea size={size} height={120} color="secondary">
            <div className="flex flex-col gap-1 pe-3">
              {LINES.map((line) => (
                <Typography key={line} level="body">
                  {line}
                </Typography>
              ))}
            </div>
          </ScrollArea>
        </Box>
      ))}
    </div>
  );
}

Accessibility

• The viewport is focusable and scrolls with the arrow keys, Page Up/Down, Home and End.
• The scrollbar appears while the pointer is over the area or while it is scrolling. The content is reachable without it in every case.