Scroll area

kai-scroll-area

Gives an overflowing region a consistent scrollbar that follows the page’s theme.

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

Preview

When to use

Any region that overflows its space: a long thread, a settings panel. For a chat transcript that auto-sticks to the latest message, reach for Conversations instead.

Usage

Put the content as light-DOM children, which land in the default slot, and give the element a bounded height in your own layout. Past that height the content scrolls inside, and the thin scrollbar follows the --color-scrollbar-thumb token. The inner padding or max-height restyles from outside via ::part(viewport).

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

Examples

Vertical (default)

Code

Horizontal

A wide row of chips or a gallery that scrolls sideways; the vertical axis is clamped.

Code

Both axes

Code

Slots

Slot	Mode	Purpose
(default)	inject	The scrollable content.

Styling

The scrolling container is one part: add padding, cap the height, or tune the scrollbar via the --color-scrollbar-thumb token.

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
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
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