Layout
Scroll Area
A focusable, themed scroll container for long lists and panels.
Deployments
8 totalInstallation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add scroll-areaWrites components/ui/scroll-area.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { ScrollArea } from "@/components/ui/scroll-area";API reference
Props and composition points for Scroll Area. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
scrollbarVisibility | "auto" | "always" | "scroll" | "hover" | "hover" | When the custom scrollbar appears. Use always for a container that must advertise overflow at rest. |
aria-label / aria-labelledby | string | None | Names the focusable scroll region. Give it a name when the content is a distinct list or panel. |
className | string | None | Set a height or width; the root clips and the viewport scrolls. |
Dependencies: radix-ui, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- The viewport is focusable, so the region can be scrolled with the keyboard without a pointer.
- When a name is provided, the viewport becomes a named region landmark. Do not wrap it in another landmark with the same name.
- The scrollbar thumb uses the published scrollbar tokens and is visible in both themes.
- Do not put the only copy of essential content in a fixed-height scroller; keep the full content reachable and avoid nested scroll areas.
Used in production
The Aback products whose interfaces shaped this component.
This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.