Layout
ScrollArea
Native scroll container with thin, themed scrollbars. Focusable (role="region") so keyboard users can scroll it — give it an accessible name.
Import
import { ScrollArea } from "@zephora/react";Examples
Vertical
`maxHeight` caps the block size before scrolling starts.
v1.0 — bug fixes and polish.
v1.1 — bug fixes and polish.
v1.2 — bug fixes and polish.
v1.3 — bug fixes and polish.
v1.4 — bug fixes and polish.
v1.5 — bug fixes and polish.
v1.6 — bug fixes and polish.
v1.7 — bug fixes and polish.
v1.8 — bug fixes and polish.
v1.9 — bug fixes and polish.
v1.10 — bug fixes and polish.
v1.11 — bug fixes and polish.
<ScrollArea maxHeight={160} aria-label="Release notes">
{notes.map((note) => (
<p key={note}>{note}</p>
))}
</ScrollArea>Horizontal
`orientation="horizontal"` scrolls the inline axis; `type="always"` keeps the bar visible.
reacttypescriptdesign-systemsa11ytokensthemingcomponentshookstestingstorybook
<ScrollArea orientation="horizontal" type="always" aria-label="Tags">
<div style={{ display: "flex", gap: 8, width: "max-content" }}>
{tags.map((tag) => (
<span key={tag}>{tag}</span>
))}
</div>
</ScrollArea>API
ScrollArea props
| Prop | Type | Default | Description |
|---|---|---|---|
maxHeight | number | string | — | Maximum block size before scrolling starts. Numbers are px. |
orientation | "vertical" | "horizontal" | "both" | "vertical" | Scrollable axes. |
type | "auto" | "always" | "auto" | "always" reserves the scrollbar gutter and always shows bars. |
unstyled | boolean | false | Headless mode — skips Zephora styling. |
Keyboard
| Key | Action |
|---|---|
Tab | Focuses the scroll region. |
Arrow keys / PageUp / PageDown | Scroll the focused region natively. |