Scroll area

A bounded overflow region with consistent, accessible scrollbars.

Built on Radix Scroll AreaUpstream API

Activity

Vehicle received9:15
Inspection started10:15
Front brake pads measured11:15
Customer concern confirmed12:15
Estimate prepared13:15
Estimate sent14:15
Customer approved work15:15
Parts allocated16:15

Usage

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

Use a scroll area when a bounded panel must retain its size while its contents grow, such as activity or command results. Give the root an explicit height. Let whole pages use normal document scrolling.

The viewport receives visible keyboard focus. Label the region when its purpose is not stated by a nearby heading, and keep important actions outside the clipped area when possible.

Accessibility

Content remains ordinary DOM content and works with wheel, touch, and keyboard scrolling. Test narrow viewports and 200% zoom to ensure the region does not trap focus or conceal essential information.