Skip to content
Hypermedia Components

Scroll area

hc-scroll-area is a scrollable region with thin, theme-colored scrollbars — the shadcn ScrollArea equivalent. It is pure CSS: it uses the standard CSS Scrollbars module (scrollbar-width + scrollbar-color, Baseline 2025), not the non-standard ::-webkit-scrollbar pseudo-elements. No JavaScript, no overlay elements — the browser’s own (now stylable) scrollbar does the work.

Basic usage

Section titled “Basic usage”

Give the region a maximum size on its scroll axis. Add tabindex="0" so keyboard users can scroll it (see Accessibility).

Scroll this region — the scrollbar is thin and themed.

Line two.

Line three.

Line four.

Line five.

Line six.

Line seven.

Line eight.

Orientation

Section titled “Orientation”

data-orientation chooses the scroll axis: vertical (default), horizontal, or both.

A very long single line of tags that overflows horizontally and scrolls sideways instead of wrapping onto multiple lines.

overscroll-behavior: contain is set, so scrolling to the end of the region does not chain to the page behind it.

Edge shadows

Section titled “Edge shadows”

Add data-shadows for a subtle shadow at each scrollable edge that appears only when there is more content to scroll in that direction — it fades in as you scroll away from an edge and out as you reach it.

Scroll — the top / bottom shadows show only when there’s more above or below.

Line two.

Line three.

Line four.

Line five.

Line six.

Line seven.

Line eight.

It’s pure CSS — a scrolling-shadows gradient where solid “cover” layers scroll with the content (background-attachment: local) and hide fixed shadow layers at the flush edge. No JavaScript and, deliberately, no scroll-driven animations (animation-timeline: scroll() is not Baseline as of 2026), so it works everywhere background-attachment: local does. It honors data-orientation (vertical / horizontal). Because the cover layers paint a solid background, set --hc-scroll-area-bg to match whatever the region sits on (default: the surface color).

Accessibility

Section titled “Accessibility”
  • A region the user can scroll must be keyboard-focusable, or keyboard-only and switch-control users can’t reach the content. Add tabindex="0" to the .hc-scroll-area (this is what lets ↑/↓ / PageUp/PageDown scroll it). Because the component is pure CSS, it cannot add this for you — it’s part of the markup contract.
  • When the region is a meaningful chunk of content, also give it role="region" and an aria-label so screen-reader users get a navigable landmark.
  • Scrollbar colors should keep enough contrast against the track; the defaults use the border / muted-text tokens.

Theming tokens

Section titled “Theming tokens”
Token pathPurpose
scroll-area.thumbScrollbar thumb color (resting).
scroll-area.thumb-hoverThumb color while the region is hovered.
scroll-area.trackScrollbar track color (default transparent).
scroll-area.shadowEdge-shadow color (data-shadows; theme-adaptive).

CSS variables

Section titled “CSS variables”
Show the generated CSS variables
--hc-scroll-area-thumb | -thumb-hover | -track
--hc-scroll-area-shadow          /* edge-shadow color (data-shadows) */
--hc-scroll-area-bg              /* cover color; default --hc-color-surface */
--hc-scroll-area-shadow-cover    /* cover band size; default 1.5rem */
--hc-scroll-area-shadow-size     /* shadow band size; default 0.6rem */

Notes & out of scope

Section titled “Notes & out of scope”
  • Styling uses the standard scrollbar-width / scrollbar-color. These give a thin, themed scrollbar everywhere modern; they don’t allow a custom thumb radius. If you want a rounded thumb on Chromium / WebKit you can layer ::-webkit-scrollbar rules yourself, but note Firefox ignores them and the standard scrollbar-color overrides them where both apply.
  • Edge shadows are supported — see Edge shadows. A fully custom overlay scrollbar (JS-rendered thumb) and scroll-to buttons remain out of scope (the native, now-stylable scrollbar stays).
Section titled “Related”
  • Card — a common container to wrap a scroll area in.
  • Command / Menu — their lists scroll with the same thin-scrollbar feel.