ComponentsBlocks

Scroll Area

@/components/kamod-ui/scroll-area

Release update #1

Scrollable content block with consistent spacing and modern card treatment.

Release update #2

Scrollable content block with consistent spacing and modern card treatment.

Release update #3

Scrollable content block with consistent spacing and modern card treatment.

Release update #4

Scrollable content block with consistent spacing and modern card treatment.

Release update #5

Scrollable content block with consistent spacing and modern card treatment.

Release update #6

Scrollable content block with consistent spacing and modern card treatment.

Release update #7

Scrollable content block with consistent spacing and modern card treatment.

Release update #8

Scrollable content block with consistent spacing and modern card treatment.

Release update #9

Scrollable content block with consistent spacing and modern card treatment.

Release update #10

Scrollable content block with consistent spacing and modern card treatment.

Release update #11

Scrollable content block with consistent spacing and modern card treatment.

Release update #12

Scrollable content block with consistent spacing and modern card treatment.

Installation

Import `ScrollArea`, `ScrollBar`, and optionally `ScrollAreaCorner` from `@/components/kamod-ui/scroll-area`.

pnpm add @kamod-ch/ui

Usage

The root gets your size and border classes; scrolling happens in an inner viewport with native scrollbars hidden. Add `ScrollBar` for a draggable thumb (vertical default or `orientation="horizontal"`). When both axes scroll, add `ScrollAreaCorner` after the bars to mask the junction. The viewport exposes `data-has-overflow-*`, `data-overflow-*-start|end`, `data-scrolling`, and CSS variables such as `--scroll-area-overflow-y-start` for edge fades (set `inherit` on pseudo-elements if needed, per Base UI).

import { ScrollArea } from "@/components/kamod-ui/scroll-area";
<ScrollArea />

Vertical Feed

A modern release feed with soft surface styling and a synced vertical thumb.

Reading Container

Use ScrollArea for dense documentation snippets while keeping the layout compact.

Scroll areas are useful for constrained panels where content length can vary significantly.

Scroll areas are useful for constrained panels where content length can vary significantly.

Scroll areas are useful for constrained panels where content length can vary significantly.

Scroll areas are useful for constrained panels where content length can vary significantly.

Scroll areas are useful for constrained panels where content length can vary significantly.

Scroll areas are useful for constrained panels where content length can vary significantly.

Scroll areas are useful for constrained panels where content length can vary significantly.

Scroll areas are useful for constrained panels where content length can vary significantly.

Compact Chips

Horizontal chips and tags stay tidy with an explicit bottom scrollbar.

Design SystemAccessibilityPerformanceComposable APITheme TokensKeyboard UXDocs

Vertical, horizontal, and corner

Use two scrollbars plus `ScrollAreaCorner` when content overflows on both axes (shadcn / Base UI pattern).

Line 1 — wide and tall content so both scrollbars appear.

Line 2 — wide and tall content so both scrollbars appear.

Line 3 — wide and tall content so both scrollbars appear.

Line 4 — wide and tall content so both scrollbars appear.

Line 5 — wide and tall content so both scrollbars appear.

Line 6 — wide and tall content so both scrollbars appear.

Line 7 — wide and tall content so both scrollbars appear.

Line 8 — wide and tall content so both scrollbars appear.

Line 9 — wide and tall content so both scrollbars appear.

Line 10 — wide and tall content so both scrollbars appear.

Line 11 — wide and tall content so both scrollbars appear.

Line 12 — wide and tall content so both scrollbars appear.

Line 13 — wide and tall content so both scrollbars appear.

Line 14 — wide and tall content so both scrollbars appear.

Line 15 — wide and tall content so both scrollbars appear.

Line 16 — wide and tall content so both scrollbars appear.

Line 17 — wide and tall content so both scrollbars appear.

Line 18 — wide and tall content so both scrollbars appear.

Line 19 — wide and tall content so both scrollbars appear.

Line 20 — wide and tall content so both scrollbars appear.

Line 21 — wide and tall content so both scrollbars appear.

Line 22 — wide and tall content so both scrollbars appear.

Line 23 — wide and tall content so both scrollbars appear.

Line 24 — wide and tall content so both scrollbars appear.

API Reference

Props, slots and variants for this component.

Scroll Area

Scroll Area component props and accepted values.

PropTypeDefault
class (ScrollArea)stringundefined
orientation (ScrollBar)"vertical" | "horizontal""vertical"
class (ScrollAreaCorner)stringundefined

Accessibility Notes

Keep focusable controls reachable in scrollable panels and ensure scroll regions have enough contrast and size for touch + pointer input.