Scroll Area

A wrapper for Base UI ScrollArea with vertical, horizontal, and dual-axis scrollbars, gradient fade via viewportCls, keepMounted, and overflow threshold control.

Orientation

Vertical — default, scrolls up/down

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

Item 31

Item 32

Item 33

Item 34

Item 35

Item 36

Item 37

Item 38

Item 39

Item 40

Item 41

Item 42

Item 43

Item 44

Item 45

Item 46

Item 47

Item 48

Item 49

Item 50

Horizontal — scrolls left/right

React

TypeScript

Next.js

Tailwind

Radix

Base UI

Zod

Prisma

tRPC

Drizzle

Hono

Bun

Vite

Vitest

Playwright

Both — vertical + horizontal + corner

Row 1 — Typography is the art and technique of arranging type to make written language l

Row 2 — Typography is the art and technique of arranging type to make written language l

Row 3 — Typography is the art and technique of arranging type to make written language l

Row 4 — Typography is the art and technique of arranging type to make written language l

Row 5 — Typography is the art and technique of arranging type to make written language l

Row 6 — Typography is the art and technique of arranging type to make written language l

Row 7 — Typography is the art and technique of arranging type to make written language l

Row 8 — Typography is the art and technique of arranging type to make written language l

Row 9 — Typography is the art and technique of arranging type to make written language l

Row 10 — Typography is the art and technique of arranging type to make written language l

Row 11 — Typography is the art and technique of arranging type to make written language l

Row 12 — Typography is the art and technique of arranging type to make written language l

Row 13 — Typography is the art and technique of arranging type to make written language l

Row 14 — Typography is the art and technique of arranging type to make written language l

Row 15 — Typography is the art and technique of arranging type to make written language l

Row 16 — Typography is the art and technique of arranging type to make written language l

Row 17 — Typography is the art and technique of arranging type to make written language l

Row 18 — Typography is the art and technique of arranging type to make written language l

Row 19 — Typography is the art and technique of arranging type to make written language l

Row 20 — Typography is the art and technique of arranging type to make written language l

Content

Prose — long text paragraph

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, letter spacing, and adjusting the space between pairs of letters. Typography has long been a vital part of promotional material, advertising, and graphic design, where there is less concern for readability and more concern for overall impact.Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, letter spacing, and adjusting the space between pairs of letters. Typography has long been a vital part of promotional material, advertising, and graphic design, where there is less concern for readability and more concern for overall impact.Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, letter spacing, and adjusting the space between pairs of letters. Typography has long been a vital part of promotional material, advertising, and graphic design, where there is less concern for readability and more concern for overall impact.

Code block — monospace pre content

import { ScrollArea } from '@/components/ui/scroll-area'
 
function App() {
  return (
    <ScrollArea className="h-64 w-80 rounded-md border">
      <div className="p-4">
        {Array.from({ length: 50 }).map((_, i) => (
          <div key={i} className="py-1 text-sm">
            Item {i + 1}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

Options

keepMounted — scrollbar persists in DOM when not needed

Scrollbar stays in DOM even when content fits. Useful to prevent layout shift.

Fade — mask-image gradient via viewportCls

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

Item 31

Item 32

Item 33

Item 34

Item 35

Item 36

Item 37

Item 38

Item 39

Item 40

Item 41

Item 42

Item 43

Item 44

Item 45

Item 46

Item 47

Item 48

Item 49

Item 50

overflowEdgeThreshold — overflow data attrs fire 20px before edge

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

Item 31

Item 32

Item 33

Item 34

Item 35

Item 36

Item 37

Item 38

Item 39

Item 40

Item 41

Item 42

Item 43

Item 44

Item 45

Item 46

Item 47

Item 48

Item 49

Item 50

Installation

npx shadcn@latest add @glrk-ui/scroll-area

If you haven't set up the prerequisites yet, check out Prerequest section.

Copy and paste the following code into your project.

ui/scroll-area.tsx

'use client'

import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'

import { cn } from '@/lib/utils'

const ScrollAreaRoot = ScrollAreaPrimitive.Root
const ScrollAreaViewport = ScrollAreaPrimitive.Viewport
const ScrollAreaContent = ScrollAreaPrimitive.Content
const ScrollAreaThumb = ScrollAreaPrimitive.Thumb
const ScrollAreaCorner = ScrollAreaPrimitive.Corner

function ScrollArea({
  className,
  children,
  ...props
}: ScrollAreaPrimitive.Root.Props) {
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn('relative', className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className="size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  )
}

function ScrollBar({
  className,
  orientation = 'vertical',
  ...props
}: ScrollAreaPrimitive.Scrollbar.Props) {
  return (
    <ScrollAreaPrimitive.Scrollbar
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      className={cn(
        'flex touch-none p-px transition-[opacity,colors] select-none opacity-0 data-[scrolling]:opacity-100 data-[hovering]:opacity-100',
        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',
        'data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent',
        className,
      )}
      {...props}
    >
      <ScrollAreaPrimitive.Thumb
        data-slot="scroll-area-thumb"
        className="relative flex-1 rounded-full bg-border"
      />
    </ScrollAreaPrimitive.Scrollbar>
  )
}

type ScrollAreaWrapperProps = ScrollAreaPrimitive.Root.Props & {
  orientation?: 'vertical' | 'horizontal' | 'both'
  viewportCls?: string
  scrollbarCls?: string
  keepMounted?: boolean
}

function ScrollAreaWrapper({
  orientation = 'vertical',
  viewportCls,
  scrollbarCls,
  keepMounted,
  className,
  children,
  ...props
}: ScrollAreaWrapperProps) {
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn('relative', className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className={cn(
          'size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1',
          viewportCls,
        )}
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      {(orientation === 'vertical' || orientation === 'both') && (
        <ScrollBar orientation="vertical" keepMounted={keepMounted} className={scrollbarCls} />
      )}
      {(orientation === 'horizontal' || orientation === 'both') && (
        <ScrollBar orientation="horizontal" keepMounted={keepMounted} className={scrollbarCls} />
      )}
      {orientation === 'both' && <ScrollAreaPrimitive.Corner />}
    </ScrollAreaPrimitive.Root>
  )
}

export {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaContent,
  ScrollAreaThumb,
  ScrollAreaCorner,
  ScrollArea,
  ScrollBar,
  ScrollAreaWrapper,
}

Usage

Basic (vertical)

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

<ScrollAreaWrapper className="h-64 w-full rounded-md border">
  <div className="p-4">{/* tall content */}</div>
</ScrollAreaWrapper>

Horizontal

<ScrollAreaWrapper orientation="horizontal" className="w-full rounded-md border">
  <div className="flex gap-4 p-4">
    {items.map(item => <Card key={item.id} className="w-48 shrink-0" />)}
  </div>
</ScrollAreaWrapper>

Both axes

Renders vertical + horizontal scrollbars and a Corner at their intersection:

<ScrollAreaWrapper orientation="both" className="h-64 w-96 rounded-md border">
  <div style={{ width: "800px" }}>
    {/* wide + tall content */}
  </div>
</ScrollAreaWrapper>

Keep scrollbar mounted

Prevents layout shift by keeping the scrollbar in the DOM even when content fits:

<ScrollAreaWrapper keepMounted className="h-64 rounded-md border">
  {/* content */}
</ScrollAreaWrapper>

Gradient fade

Use the viewportCls prop to apply a mask-image gradient via the viewport element:

<ScrollAreaWrapper
  className="h-64 rounded-md border"
  viewportCls="[mask-image:linear-gradient(to_bottom,transparent_0,black_2rem,black_calc(100%-2rem),transparent_100%)]"
>
  {/* content */}
</ScrollAreaWrapper>

Overflow edge threshold

Fire overflow data attributes before reaching the exact scroll edge:

<ScrollAreaWrapper overflowEdgeThreshold={20} className="h-64 rounded-md border">
  {/* content */}
</ScrollAreaWrapper>

Using primitives

import {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaCorner,
  ScrollBar,
} from "@/components/ui/scroll-area"

<ScrollAreaRoot className="relative h-64">
  <ScrollAreaViewport className="size-full rounded-[inherit]">
    {/* content */}
  </ScrollAreaViewport>
  <ScrollBar orientation="vertical" />
  <ScrollBar orientation="horizontal" />
  <ScrollAreaCorner />
</ScrollAreaRoot>

Base UI ScrollArea

Scroll Area

Installation

Usage

Basic (vertical)

Horizontal

Both axes

Keep scrollbar mounted

Gradient fade

Overflow edge threshold

Using primitives

Reference

ScrollAreaWrapper

ScrollBar

On this page