ScrollArea

Ein Scroll-Container mit dünnen Scrollbalken, die beim Überfahren erscheinen.

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
Zugänglicher Name, wenn der Bereich fokussierbar ist.
children
ReactNode
Der Inhalt, der scrollt.
orientation
"both" | "horizontal" | "vertical" = vertical
Die Richtungen, in die er scrollt.
viewportClassName
string
Klassen für das scrollende Element, nur für das Layout.