Scroll Area

Overview

Scroll area replaces native scrollbars with the kit's chrome — an outline-variant thumb that darkens under the pointer — while keeping native scroll behavior (wheel, touch, keyboard). Scrolling the viewport with the keyboard shows the field-style primary focus ring.

Examples

Horizontal

Add a ScrollBar orientation="horizontal" for horizontally scrolling content.

Artwork 1

Artwork 2

Artwork 3

Artwork 4

Artwork 5

Artwork 6

Artwork 7

Artwork 8

Artwork 9

Artwork 10

Installation

Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add scroll-area. In the meantime, since this is the base shadcn component, you can also add it directly:

npx shadcn@latest add scroll-area

API Reference

Prop

Type

Accessibility

The viewport is keyboard-focusable so content can be scrolled without a pointer.
Custom scrollbars are visual only — native scroll semantics (and screen-reader behavior) are preserved.