ScrollArea

Installation

Package

@bigbang/ui

Import

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

Source

ScrollArea.tsx

Storybook

ScrollArea · Playground

ScrollArea is in the @bigbang/ui package.

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

<div className="h-60">
  <ScrollArea label="Activity list">…</ScrollArea>
</div>;

Props

label

Description

Name of the scrollable region for screen readers, such as "Etkinlik listesi". With it the area becomes a named region landmark.

Type

string

orientation

Description

Which way the content scrolls. both shows two scrollbars.

Type

'vertical' | 'horizontal' | 'both'

Default

'vertical'

fade

Description

Fades the edges where more content is hidden.

Type

boolean

Default

true

className

Description

For layout only: size, such as a fixed height, margins and placement. The area fills the size you give it.

Type

string

childrenRequired

Description

Content that may be larger than the area.

Type

ReactNode

Data attributes

• data-component="scroll-area": on the root.
• data-scrolling, data-has-overflow-x, data-has-overflow-y, data-overflow-x-start, data-overflow-x-end, data-overflow-y-start, data-overflow-y-end: on the root (Base UI).
• data-hovering, data-scrolling, data-orientation: on a scrollbar.