ScrollArea

A scrollable region wrapping long or overflowing content.

Deploy history10 deploys today

d9fc7d9Second-factor backoffproduction12:41

26cb3caPer-subject password backoffproduction11:58

e37b40eManagement API referencestaging11:12

8950280Tenants and domains routesstaging10:47

c5959d3Audit events routestaging10:02

a1b7f04Session cookie rotationproduction09:35

7c2de91Rate limit headerspreview09:04

4fe0a3bDrop the legacy token tablepreview08:48

b03cc17Sign-in throttle metricspreview08:21

f61d5aaPasskey enrollment copypreview07:56

View code

<ScrollArea aria-label="Deploy history">
	<ScrollArea.Viewport mix={[scrollFade({ size: "2rem" })]}>
		<header
			mix={[
				sticky(),
				scrollShadow({ distance: "48px" }),
				css({ insetBlockStart: "0", zIndex: "1" }),
				hstack({ gap: 2, align: "center", justify: "between" }),
				p(3),
				bg(),
			]}
		>
			Deploy history
			<Text>{deploys.length} deploys today</Text>
		</header>

		{deploys.map((deploy) => (
			<div key={deploy.sha}>
				<div mix={[hstack({ gap: 3, align: "center" }), p(3)]}>
					<code>{deploy.sha}</code>
					<span mix={[css({ flexGrow: "1" })]}>{deploy.summary}</span>
					<Badge color={deploy.status} variant="secondary">
						{deploy.environment}
					</Badge>
					<Text>{deploy.at}</Text>
				</div>
				<Separator />
			</div>
		))}
	</ScrollArea.Viewport>
</ScrollArea>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { ScrollArea } from "@sdxc/ui";

Renders the scroll area's outer panel: a relatively positioned, rounded, bordered <div> that frames whatever ScrollArea.Viewport scrolls inside it, staying a fixed border around the scrolling content.

Composition

The parts the component publishes, each a static property of the host.

ScrollArea
ScrollArea.ViewportRenders the scroll area's scrolling surface: a <div> filling its parent panel, clipping and scrolling along the axis named by data-orientation with a thin native scrollbar that gains a focus ring when focus-visible.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"div">.

ScrollArea.Viewport

Prop	Type	Description
`orientation?`	`"vertical" \| "horizontal" \| "both"`	Axis the viewport scrolls along. Defaults to DEFAULT_ORIENTATION.

Also accepts everything in TagProps<"div">.

Types

Name	Values	What it decides
`Orientation`	`"vertical" \| "horizontal" \| "both"`	Axis ScrollArea.Viewport scrolls along: only the block axis (`"vertical"`), only the inline axis (`"horizontal"`), or both at once (`"both"`).