Components
Scroll Area
Scroll area on Base UI: square ink thumb on a tint-1 track, focusable viewport.
Preview
Install
bash
npx shadcn add @eloquent/scroll-areaUsage
tsx
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
<ScrollArea aria-label="Contents" className="h-64 w-56">
{/* long content */}
</ScrollArea>
<ScrollArea aria-label="Back issues" className="w-80">
<div className="flex w-max gap-6">{/* wide content */}</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>Set the height (or width) on ScrollArea. Name it with aria-label or aria-labelledby when the content has no heading of its own.
States
Horizontal
| State | Treatment |
|---|---|
| Default | tint-1 track and a square ink thumb, always shown |
| Focus | 2px ink outline, 2px offset, on the viewport |
Keyboard
| Key | Action |
|---|---|
| Tab / Shift+Tab | Move focus to and from the viewport |
| Arrow keys | Scroll by a line |
| Page Up / Page Down, Space | Scroll by a page |
| Home / End | Scroll to the start or end |
Vietnamese
Ink adaptation
Upstream shadcn's rounded grey thumb and hover-revealed track are replaced by a square ink thumb on a tint-1 track that never hides, so there is no hover effect. The viewport is a tab stop with the ink focus outline. Built on Base UI ScrollArea.