Layout UI

Scroll Area

Custom-styled scrollable container with thin border-coloured scrollbar. Built on Base UI Scroll Area.

Preview

Installation

bash
npx shadcn@latest add @layout/scroll-area

Usage

tsx
import { ScrollArea, ScrollBar } from "@/registry/layout/scroll-area/scroll-area";

Examples

Horizontal scroll

Changelog panel

Guidelines for AI agents

Set a fixed height (e.g. h-64) on ScrollArea so the viewport can overflow. Use orientation="horizontal" or "both" for horizontal or bidirectional scrolling. ScrollBar is exported separately so you can control its placement precisely when the orientation is set on ScrollArea.

Never

  • Neveruse ScrollArea without a constrained height on the root; it will not scroll if the parent grows unbounded
  • Neverapply overflow-* on the ScrollArea root or viewport; Base UI manages overflow internally
  • Neverstyle the scrollbar thumb with a specific colour; use bg-border so it stays consistent with the token contract
  • Nevernest ScrollArea inside another ScrollArea on the same axis; competing scroll contexts confuse pointer events

Tokens consumed

--layout-border--layout-radius--layout-duration-base