Scroll area

A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.

$npx shadcn@latest add @silicon-ui/scroll-area

disclosurenew

Installation

$npx shadcn@latest add @silicon-ui/scroll-area

Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/scroll-area/scroll-area.tsx
- components/silicon-ui/scroll-area/scroll-area.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { ScrollArea } from "@/components/silicon-ui/scroll-area/scroll-area";

Prop	Type	Default
`children`	`ReactNode`	—
`orientation` Axes that scroll. Defaults to vertical.	`"vertical" \| "horizontal" \| "both"`	`"vertical"`
`fade` Length of the edge fade in px. 0 turns the fades off.	`number`	`28`
`scrollbars` "auto" shows scrollbars while scrolling or hovering; "always" keeps them visible when content overflows.	`"auto" \| "always"`	`"auto"`
`hideDelay` How long scrollbars linger after scrolling stops, in ms.	`number`	`900`
`maxHeight` Maximum height of the viewport, for vertical areas that should grow with their content.	`CSSProperties["maxHeight"]`	—
`snap` Passed to the viewport's `scroll-snap-type`, for example "x mandatory". Children set their own `scroll-snap-align`.	`CSSProperties["scrollSnapType"]`	—
`label` Accessible name. The viewport becomes a labelled, focusable region that arrow and page keys scroll.	`string`	—
`wheelToHorizontal` Turns vertical wheel movement into horizontal scrolling for horizontal areas. Defaults to true.	`boolean`	`true`
`viewportClassName`	`string`	—
`viewportStyle`	`CSSProperties`	—
`viewportRef`	`Ref<HTMLDivElement>`	—
`onScroll`	`(event: UIEvent<HTMLDivElement>) => void`	—
`onEdgeChange` Called when content starts or stops extending past an edge.	`(edges: ScrollAreaEdges) => void`	—

Also accepts the props of HTMLAttributes<HTMLDivElement>, except onScroll.