Scroll Area

A <div> with native overflow-y: auto.scrollbar-gutter: stable reserves the scrollbar's space up front, so content doesn't shift by a few pixels when a scrollbar appears or disappears. The scrollbar's colours are restyled with scrollbar-color/scrollbar-width and the WebKit scrollbar pseudo-elements, as a cosmetic layer on top of real, native scrolling, never a replacement for it.

import { ScrollArea } from "@kernelui/react";

const items = ["Item 1", "Item 2", "Item 3"];

function ItemList() {
  return (
    <ScrollArea maxBlockSize="12rem">
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </ScrollArea>
  );
}

Props

Accessibility

• A native overflow container is already keyboard-scrollable once focused, nothing extra to wire up.