Scroll Area — `.mv-scroll-area`

Scroll area with a thin scrollbar, auto-hide, scroll-driven edge fades and snapping.

Category	Layout
Type	CSS only (`.mv-scroll-area`)
Status	stable
Keywords	scroll, scrollbar, fade, snap, overflow

When to use

A fixed-height region like a chat log, list or code block must scroll with a thin, styled scrollbar
Edge fades should hint that more content exists above, below or to the side
A horizontal row of chips or cards should scroll and snap each item into place

Avoid when

Items should be browsed with arrows, dots or autoplay rather than free scrolling → use Carousel instead
The whole page scrolls normally; nesting scroll regions for main content hurts usability

Install

node scripts/add.mjs scroll-area --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["scroll-area"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, components/scroll-area/scroll-area.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div style="display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:1.25rem;width:100%;max-width:44rem;align-items:start">
  <div style="border:1px solid var(--mv-border);border-radius:var(--mv-radius-lg);background:var(--mv-surface);overflow:hidden">
  <div class="mv-scroll-area" data-fade data-autohide tabindex="0" aria-label="Versions" style="height:14rem">
    <ul style="list-style:none;margin:0;padding:.5rem 1rem;font-size:.875rem">
      <li style="padding:.4rem 0;font-weight:600">Versions</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.4.0 — Tokens motion</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.3.2 — Focus fix</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.3.1 — Dialog swipe</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.3.0 — Command palette</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.2.4 — Stacked toasts</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.2.0 — Calendar</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.1.0 — Animated tabs</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.0.0 — Web Components</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v2.9.1 — Dark theme</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v2.9.0 — CSS layers</li>
    </ul>
  </div>
  </div>
  <div class="mv-scroll-area" data-orientation="horizontal" data-fade data-snap="x" tabindex="0" aria-label="Gallery" style="display:flex;gap:.75rem;padding-bottom:.5rem">
    <div style="flex:0 0 9rem;height:12rem;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.8 .12 30),oklch(.6 .18 10))"></div>
    <div style="flex:0 0 9rem;height:12rem;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.8 .12 90),oklch(.62 .16 60))"></div>
    <div style="flex:0 0 9rem;height:12rem;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.8 .12 160),oklch(.55 .14 180))"></div>
    <div style="flex:0 0 9rem;height:12rem;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.8 .12 230),oklch(.55 .18 260))"></div>
    <div style="flex:0 0 9rem;height:12rem;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.8 .12 300),oklch(.55 .2 320))"></div>
    <div style="flex:0 0 9rem;height:12rem;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.75 .08 270),oklch(.4 .1 270))"></div>
  </div>
</div>

API

Attributes

Name	Type	Description
`data-orientation`	vertical \| horizontal	Restricts the scroll axis.
`data-fade`	boolean	Edge fades that disappear at the start/end of the scroll.
`data-autohide`	boolean	Scrollbar only visible on hover/focus.
`data-snap`	x \| y	Snaps the children.

CSS classes

Name	Description
`mv-scroll-area`	On the scrolling container.

CSS variables

Name	Default	Description
`--mv-scroll-area-fade`	`2.5rem`	Fade size.

Accessibility

Add tabindex="0" and an aria-label so the area can be scrolled with the keyboard.