Scroll

A scroll area with a custom, cross-browser styled scrollbar, built on Base UI Scroll Area.

Docs API Reference

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

"use client";

import { Scroll } from "@smartacteam/ambient-web/scroll";

export function ScrollDemo() {
  return (
    <Scroll.Area className="h-72 w-48 rounded-lg border border-stroke-default p-4">
      {Array.from({ length: 30 }).map((_, index) => (
        <div key={index} className="text-sm">
          Item {index + 1}
        </div>
      ))}
    </Scroll.Area>
  );
}

Usage

For a simple scrollable region, use the all-in-one Scroll.Area:

import { Scroll } from "@smartacteam/ambient-web/scroll";

<Scroll.Area className="h-72 w-48">{children}</Scroll.Area>

For layouts that need to compose the viewport, content, and scrollbar separately (for example, a chat message list that also needs a corner or horizontal scrollbar), use the compound parts:

<Scroll.Root className="h-72 w-48">
  <Scroll.Viewport>
    <Scroll.Content>{children}</Scroll.Content>
  </Scroll.Viewport>
  <Scroll.Scrollbar />
  <Scroll.Corner />
</Scroll.Root>