Scroll area

kai-scroll-area

A themed, thin-scrollbar scroll container for any overflowing region. Give it a bounded height, put the content in the default slot, and it scrolls inside — with a cross-browser scrollbar that follows your theme.

• Shadow DOM
• Light-DOM content
• Themed thin scrollbar
• Keyboard-reachable

Preview

When to use

Wrap any region that overflows its space — a long message thread, a settings panel, a changelog, a list of search results — when you want a thin, consistent scrollbar instead of the browser’s default. For a full chat transcript that auto-sticks to the latest message, reach for Conversations instead.

Usage

Put the scrollable content as light-DOM children — it lands in the default slot — and give the element a bounded height in your own layout. Once the content is taller than that height, it scrolls inside, and the thin scrollbar follows the --color-scrollbar-thumb token. Restyle the inner padding or max-height from outside via ::part(viewport); the behavior stays in the component.

<kai-scroll-area style="height: 16rem">
  <p>…long content that overflows the height…</p>
  <p>…more content…</p>
</kai-scroll-area>

Examples

Vertical (default)

orientation="vertical" — a bounded box with a tall column; the content scrolls down and the thin scrollbar appears.

Code

Horizontal

orientation="horizontal" — a wide row (chips, a gallery) that scrolls sideways. The vertical axis is clamped.

Code

Both axes

orientation="both" — content larger than the box on both axes scrolls in two directions.

Code

Styling

Restyle the scrolling container through its part — add padding, cap the height, or tune the scrollbar via the --color-scrollbar-thumb token from outside the element.

Part	Purpose	Example
viewport	The scrolling container. Add padding or a max-height from outside; the thin scrollbar follows `--color-scrollbar-thumb`.	kai-scroll-area::part(viewport) { padding-right: 0.5rem }

Props

Property	Type	Default	Notes
orientation	"vertical" | "horizontal" | "both"	'vertical'	Which axis scrolls. `vertical` (default) · `horizontal` · `both`. The cross axis is clamped so content can't overflow it.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ScrollArea

---

Need a hand? Report a bug Ask for help