Scroll Area

New

Augments native scroll functionality with auto, hover, and always visibility modes, scrollbar variants, gutter reserve, keyboard navigation, and high-contrast support.

$ pnpm dlx shadcn@latest add @byphongphan/scroll-area

Requires @byphongphan in components.json

data-display

scroll-area.tsx

Tags & Releases

v1.2.0-beta.50

v1.2.0-beta.49

v1.2.0-beta.48

v1.2.0-beta.47

v1.2.0-beta.46

v1.2.0-beta.45

v1.2.0-beta.44

v1.2.0-beta.43

v1.2.0-beta.42

v1.2.0-beta.41

v1.2.0-beta.40

v1.2.0-beta.39

v1.2.0-beta.38

v1.2.0-beta.37

v1.2.0-beta.36

v1.2.0-beta.35

v1.2.0-beta.34

v1.2.0-beta.33

v1.2.0-beta.32

v1.2.0-beta.31

v1.2.0-beta.30

v1.2.0-beta.29

v1.2.0-beta.28

v1.2.0-beta.27

v1.2.0-beta.26

v1.2.0-beta.25

v1.2.0-beta.24

v1.2.0-beta.23

v1.2.0-beta.22

v1.2.0-beta.21

v1.2.0-beta.20

v1.2.0-beta.19

v1.2.0-beta.18

v1.2.0-beta.17

v1.2.0-beta.16

v1.2.0-beta.15

v1.2.0-beta.14

v1.2.0-beta.13

v1.2.0-beta.12

v1.2.0-beta.11

v1.2.0-beta.10

v1.2.0-beta.9

v1.2.0-beta.8

v1.2.0-beta.7

v1.2.0-beta.6

v1.2.0-beta.5

v1.2.0-beta.4

v1.2.0-beta.3

v1.2.0-beta.2

v1.2.0-beta.1

Loading preview...

Installation

Install the following dependencies:

$ pnpm add @base-ui/react class-variance-authority

Requires @byphongphan in components.json

Copy and paste the scroll-area component into your project.

components/ui/scroll-area.tsx

Update the import paths to match your project setup.

Usage

import { ScrollArea } from "@/registry/ui/scroll-area"
export function ScrollAreaDemo() {  return (    <ScrollArea      className="h-72 w-52 rounded-md border p-4"      variant="default"      size="default"      type="hover"      scrollbarGutter="auto"    >      <div className="space-y-2">        <h4 className="text-sm font-semibold">Title</h4>        <p className="text-xs text-muted-foreground">Long content...</p>      </div>    </ScrollArea>  )}

Examples

Horizontal Scrolling

ScrollArea with horizontal orientation for scrolling horizontal photo feeds, tag carousels, or metric cards.

scroll-area-horizontal.tsx

Minimal Hairline

Ultra-compact zero-margin scrollbar for dense data tables, code editors, and side panels.

scroll-area-minimal.tsx

10:40:0[WARN]Memory threshold warning triggered on cluster-01

10:40:6[INFO]Request processed successfully [req_138]

10:40:12[INFO]Request processed successfully [req_276]

10:40:18[INFO]Request processed successfully [req_414]

10:40:24[INFO]Request processed successfully [req_552]

10:40:30[INFO]Request processed successfully [req_690]

10:40:36[INFO]Request processed successfully [req_828]

10:40:42[WARN]Memory threshold warning triggered on cluster-01

10:40:48[INFO]Request processed successfully [req_1104]

10:40:54[INFO]Request processed successfully [req_1242]

10:41:0[INFO]Request processed successfully [req_1380]

10:41:6[ERROR]Connection dropped, retrying in 300ms...

10:41:12[INFO]Request processed successfully [req_1656]

10:41:18[INFO]Request processed successfully [req_1794]

10:41:24[WARN]Memory threshold warning triggered on cluster-01

10:41:30[INFO]Request processed successfully [req_2070]

10:41:36[INFO]Request processed successfully [req_2208]

10:41:42[INFO]Request processed successfully [req_2346]

10:41:48[INFO]Request processed successfully [req_2484]

10:41:54[INFO]Request processed successfully [req_2622]

10:42:0[INFO]Request processed successfully [req_2760]

10:42:6[WARN]Memory threshold warning triggered on cluster-01

10:42:12[ERROR]Connection dropped, retrying in 300ms...

10:42:18[INFO]Request processed successfully [req_3174]

10:42:24[INFO]Request processed successfully [req_3312]

10:42:30[INFO]Request processed successfully [req_3450]

10:42:36[INFO]Request processed successfully [req_3588]

10:42:42[INFO]Request processed successfully [req_3726]

10:42:48[WARN]Memory threshold warning triggered on cluster-01

10:42:54[INFO]Request processed successfully [req_4002]

10:43:0[INFO]Request processed successfully [req_4140]

10:43:6[INFO]Request processed successfully [req_4278]

10:43:12[INFO]Request processed successfully [req_4416]

10:43:18[ERROR]Connection dropped, retrying in 300ms...

10:43:24[INFO]Request processed successfully [req_4692]

10:43:30[WARN]Memory threshold warning triggered on cluster-01

10:43:36[INFO]Request processed successfully [req_4968]

10:43:42[INFO]Request processed successfully [req_5106]

10:43:48[INFO]Request processed successfully [req_5244]

10:43:54[INFO]Request processed successfully [req_5382]

Bordered Track

Defined track border separating the scroll gutter from overflowing content.

scroll-area-bordered.tsx

1. Introduction to Quantum Systems14 mins

2. Wave-Particle Duality Principles22 mins

3. Superposition & State Vectors19 mins

4. Quantum Entanglement Mechanics28 mins

5. Quantum Gates & Circuit Design35 mins

6. Error Correction Architectures41 mins

7. Scalable Quantum Hardware30 mins

8. Cryptographic Implementations25 mins

9. Summary & Future Trajectories16 mins

Floating Island

Elevated floating thumb with soft shadow and inset padding for card surfaces and modal overlays.

scroll-area-floating.tsx

Activity FeedLive

Deployment Successful2m ago

Production build deployed to Vercel edge.

New Subscriber15m ago

Alex subscribed to Developer Pro membership.

Database Backup Completed1h ago

Automated snapshot captured 4.2GB of data.

Security Patch Applied3h ago

Dependencies upgraded with 0 vulnerabilities.

Pull Request Merged5h ago

Feature/scroll-area-variants merged to main.

Domain SSL Renewed1d ago

Certificate auto-renewed for byphongphan.com.

Scroll Fade Mask

Top and bottom content fade masks indicating offscreen overflowing content.

scroll-area-scroll-fade.tsx

Core Principles

Creativity#01

Craftsmanship#02

Engineering#03

Design Systems#04

Performance#05

Accessibility#06

Typography#07

Motion & Fluidity#08

Architecture#09

Reliability#10

Clean Code#11

User Experience#12

Pixel Perfection#13

Innovation#14

Props

Prop	Type	Default	Description
`type`	`"hover" \| "auto" \| "always"`	`"hover"`	Visibility behavior for the scrollbars.
`variant`	`"default" \| "minimal" \| "bordered" \| "floating"`	`"default"`	Visual aesthetic variant for the scrollbar track and thumb.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Thickness of the scrollbar track (4px, 6px, or 10px).
`orientation`	`"vertical" \| "horizontal" \| "both" \| "none"`	`"both"`	Orientation of the automatically managed built-in scrollbars.
`scrollbarGutter`	`boolean \| "auto" \| "stable"`	`false`	Controls reserve gutter spacing to eliminate layout shifts.
`scrollFade`	`boolean`	`false`	Adds smooth mask fade gradient at the overflowing edges.
`overscrollContain`	`boolean`	`false`	Prevents scroll chaining to parent containers on boundary edges.
`fill`	`boolean`	`false`	Stretches viewport content container to 100% width and height.
`clampContentMinWidth`	`boolean`	`true`	Constrains content `min-width: 0` to enable responsive resizing.
`classNameViewport`	`string`	`undefined`	Additional CSS class names applied directly to the Viewport element.
`tabIndex`	`number`	`0`	Keyboard focus tab index for keyboard-navigable scrolling.
`role`	`string`	`"region"`	Accessible ARIA role for screen-reader region identification.

Scroll Area

Tags & Releases

Installation

Usage

Examples

Horizontal Scrolling

Minimal Hairline

Bordered Track

Table of Contents

Floating Island

Scroll Fade Mask

Props

Command Palette

Tags & Releases