ScrollArea
Content that scrolls inside a box of fixed size, with the package's scrollbar in every browser.
A scroll area lets content scroll inside a box of fixed size, with a slim scrollbar that looks the
same in every browser and theme. Use it for a panel inside a page: a list in a popover, a log, a
row of tiles. The page itself scrolls natively. It is built on Base UI's scroll area. For the long
option lists of a picker, the composed List adds the details of a listbox.
// apps/docs/examples/ui/scroll-area.tsx'use client';
import { ScrollArea, ScrollBar,} from '@workspace/active-ui/components/primitives/scroll-area';import {Separator} from '@workspace/active-ui/components/primitives/separator';
const EVENTS = Array.from( {length: 40}, (_, index) => `Statement ${String(index + 1).padStart(2, '0')} sent`,);const YEARS = Array.from({length: 12}, (_, index) => 2015 + index);
/** * Content that scrolls inside a fixed box, with the package's scrollbar: a * long list vertically, and a row of tiles sideways with a horizontal * scrollbar added. */export default function ScrollAreaExample() { return ( <div className="flex w-full max-w-sm flex-col gap-6"> <ScrollArea className="h-56 rounded-md border"> <div className="p-4"> <h4 className="mb-3 text-sm font-semibold">Activity</h4> {EVENTS.map((event, index) => ( <div key={event}> {index > 0 ? <Separator className="my-2" /> : null} <p className="text-sm">{event}</p> </div> ))} </div> </ScrollArea> <ScrollArea className="w-full rounded-md border whitespace-nowrap"> <div className="flex w-max gap-3 p-4"> {YEARS.map((year) => ( <div key={year} className="bg-muted flex size-20 shrink-0 items-center justify-center rounded-md text-sm font-medium" > {year} </div> ))} </div> <ScrollBar orientation="horizontal" /> </ScrollArea> </div> );}Usage#
import {ScrollArea} from '@workspace/active-ui/components/primitives/scroll-area';
<ScrollArea className="h-56 rounded-md border">{longContent}</ScrollArea>;Anatomy#
Scroll: the box and its viewport, with a vertical scrollbar and the corner. Give it a height (or a width) for content to scroll in.Area Scroll: a scrollbar;Bar orientation="horizontal"adds the sideways one, as in the example.
What your application provides#
The size of the box.
For a horizontal row: content wider than the box (
w-,max whitespace-).nowrap
Accessibility and keyboard#
The viewport takes focus when it can scroll, so the arrow keys,
Page UpandPage Downscroll it; it shows the focus ring.The scrollbars are for the pointer; the wheel, touch and the keyboard scroll the content too.
API#
ScrollArea
All props come from the Base UI part this component is built on.
Props
- Type
numberPartial<…>- Default
0
The threshold in pixels that must be passed before the overflow edge attributes are applied. Accepts a single number for all edges or an object to configure them individually.
- Type
ComponentRender Fn<…> ReactElement<…>
Allows you to replace the component's HTML element with a different tag, or compose it with another component.
Accepts a React or a function that returns the element to render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
ScrollBar
All props come from the Base UI part this component is built on.
Props
- Type
boolean- Default
false
Whether to keep the HTML element in the DOM when the viewport isn't scrollable.
- Type
"horizontal""vertical"- Default
'vertical'
Whether the scrollbar controls vertical or horizontal scroll.
- Type
ComponentRender Fn<…> ReactElement<…>
Allows you to replace the component's HTML element with a different tag, or compose it with another component.
Accepts a React or a function that returns the element to render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
This page adapts the Scroll Area documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.