ComponentsPage layouts

Scroll Area

A consistent thin scrollbar for bounded regions — activity feeds, option lists, chip strips, code blocks — with optional edge fades. Native scrolling is kept.

Radix Scroll Area components/scroll-area.tsx, lib/use-edge-fade.ts, styles/navigation.csstheme · material · accent · density · font

Recent activity

  • Invoice INV-2026-0418 paid09:42 · $4,250.00
  • New lead: Fabrikam Logistics09:15 · Web form
  • Deal moved to Negotiation08:58 · Contoso renewal
  • Contract signed08:31 · Tailspin Toys
  • Refund issuedYesterday · $129.00
  • Meeting bookedYesterday · Northwind QBR
  • Invoice INV-2026-0411 overdueNov 8 · $1,980.00
  • Seat addedNov 8 · Elif Kaya
  • Webhook failed 3×Nov 7 · orders.created
  • Export finishedNov 7 · contacts.csv
  • Plan upgradedNov 6 · Team → Business
  • Password resetNov 6 · jonas.weber@

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { ScrollArea } from "@vamos-ui/react";

<ScrollArea maxHeight={320} fade aria-label="Recent activity">…</ScrollArea>

Keep the page body and the Sidebar on native scrolling. ScrollArea is for embedded, bounded regions (performance, iOS momentum).

The viewport is keyboard-focusable only when its content has nothing focusable of its own.

Examples

Horizontal chip strip

orientation="horizontal" with fade: the mask disappears at each edge. Give the content w-max.

AllBreakfastTurkishSeafoodVeganCoffeeKebabMezeBakeryItalianJapaneseStreet foodFine diningDesserts

Both directions (code)

orientation="both"; type="auto" shows the bars whenever content overflows.

{
  "event": "order.created",
  "id": "evt_01JCZ3N8Q4W7M2V6T5K9R1XH0B",
  "created_at": "2026-11-10T09:42:17Z",
  "data": {
    "order_id": "ord_8841",
    "customer": { "name": "Ayşe Demir", "email": "ayse.demir@example.com" },
    "lines": [
      { "sku": "GRN-CER-01", "name": "Hand grinder, ceramic burr", "qty": 1, "unit_price": "89.00" },
      { "sku": "BEAN-ETH-250", "name": "Ethiopia Guji, 250 g", "qty": 2, "unit_price": "16.50" }
    ],
    "total": "122.00",
    "currency": "EUR"
  }
}

In a floating panel

Long option lists inside popovers and menus. The thumb uses the foreground at 25%, so it reads on glass and solid.

  • Europe/Istanbul
  • Europe/London
  • Europe/Berlin
  • Europe/Madrid
  • America/New York
  • America/Chicago
  • America/Los Angeles
  • America/Sao Paulo
  • Asia/Dubai
  • Asia/Kolkata
  • Asia/Singapore
  • Asia/Tokyo
  • Australia/Sydney

API

ScrollArea

PropTypeDefault
orientation
Which scrollbars to render.
"vertical" | "horizontal" | "both""vertical"
maxHeight
Max viewport height (number = px); grows with content up to it.
number | string—
fade
Edge fade mask on the scrolling axis (not for both).
booleanfalse
type
When the scrollbars are visible.
"hover" | "scroll" | "auto" | "always""hover"
size
Scrollbar thickness.
"sm" | "md""sm"
scrollHideDelay
ms before hover / scroll bars hide.
number600
viewportRef
The scrolling element (scroll position, virtualisation).
Ref<HTMLDivElement>—
viewportClassName
Class names for the viewport.
string—
aria-label
Names the region (adds role="region"). Recommended when the region is focusable.
string—
dir
The vertical bar moves to the left in RTL.
"ltr" | "rtl"—

ScrollBar

PropTypeDefault
orientation
For custom layouts; ScrollArea renders its bars automatically.
"vertical" | "horizontal""vertical"
size
Overrides the area's size.
"sm" | "md"—
Previous
Agenda / scheduler
Next
Select