ScrollArea

A scroll container with thin scrollbars that appear on hover.

gpt-5
gpt-5-mini
claude-sonnet-4-5
claude-haiku-4-5
gpt-4.1-nano
gpt-5
gpt-5-mini
claude-sonnet-4-5
claude-haiku-4-5
gpt-4.1-nano
gpt-5
gpt-5-mini
claude-sonnet-4-5
claude-haiku-4-5
gpt-4.1-nano

<ScrollArea className="h-160 w-320 rounded-well bg-fill-1" aria-label="Models">
      <ul className="flex flex-col p-12">
        {[...models, ...models, ...models].map((m, i) => (
          <li key={i} className="flex h-32 items-center mono text-small text-fg">
            {m.model}
          </li>
        ))}
      </ul>
    </ScrollArea>

import { ScrollArea } from "@logicplanes/kaeso-ui";

Props

aria-label
string
Accessible name when the region is focusable.
children
ReactNode
The content that scrolls.
orientation
"both" | "horizontal" | "vertical" = vertical
The directions it scrolls in.
viewportClassName
string
Classes for the scrolling element, for layout only.