Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    ScrollArea

    A scrollable region with thin themed scrollbars and fading edges.

    Storybook
    Storybook
    Source
    Source

    The example below loads live from Storybook; open it in Storybook to use the controls. Hover and scroll the area to see the scrollbar appear and the edges fade.

    Live example, StorybookOpen in Storybook

    Vertical

    Section titled “Vertical”

    The default direction is vertical. The area fills the size you give it; here a 240 px high box. label makes the area a named region.

    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>
      );
    }

    Horizontal

    Section titled “Horizontal”

    orientation="horizontal" scrolls sideways; in right-to-left languages the fade direction turns too.

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

    export default function Horizontal() {
      return (
        <Provider locale="en-GB">
          <div className="w-80 max-w-full rounded-md border border-line-subtle">
            <ScrollArea orientation="horizontal" label="Item list">
              <div className="flex w-max gap-sm p-md">
                {Array.from({ length: 12 }, (_, index) => (
                  <span key={index} className="rounded-full bg-surface-sunken px-md py-xs">
                    Tag {index + 1}
                  </span>
                ))}
              </div>
            </ScrollArea>
          </div>
        </Provider>
      );
    }

    Both directions

    Section titled “Both directions”

    orientation="both" shows two scrollbars.

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

    export default function Both() {
      return (
        <Provider locale="en-GB">
          <div className="h-48 w-72 rounded-md border border-line-subtle">
            <ScrollArea orientation="both" label="Item list">
              <p className="m-0 w-[36rem] p-md">{Array.from({ length: 6 }, () => 'Long content stays inside the scrollable area. The scrollbar appears while the pointer is over the area or it scrolls.').join(' ')}</p>
            </ScrollArea>
          </div>
        </Provider>
      );
    }

    Without fade

    Section titled “Without fade”

    fade={false} turns off the edge fade; use it when content must stay fully visible up to the edge.

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

    export default function WithoutFade() {
      return (
        <Provider locale="en-GB">
          <div className="h-60 w-72 rounded-md border border-line-subtle">
            <ScrollArea fade={false} 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>
      );
    }

    Light and dark mode

    Section titled “Light and dark mode”

    Colours come from semantic tokens; neither mode needs extra settings.

    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>
      );
    }