Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Installation

1. Install the dependency:


npm install @radix-ui/react-scroll-area

2. Copy and paste the following code into your project:


// components/ui/scroll-area.tsx
"use client"
 
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
// ScrollArea: relative overflow-hidden
// Viewport: size-full rounded-[inherit]
// ScrollBar vertical: w-2.5 border-l
// ScrollBar horizontal: h-2.5 border-t
// Thumb: bg-border rounded-full

Usage


import { ScrollArea } from '@/components/ui/scroll-area'
import { Separator } from '@/components/ui/separator'
import { ComponentPreview } from '@/components/component-preview'


<ScrollArea className="h-48 w-48 rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
    {Array.from({ length: 20 }, (_, i) => `Tag ${i + 1}`).map((tag) => (
      <div key={tag}>
        <div className="text-sm py-1">{tag}</div>
        <Separator className="my-1" />
      </div>
    ))}
  </div>
</ScrollArea>

Examples

Horizontal Scroll Area

Use ScrollBar with orientation="horizontal" for horizontally scrollable content.


<ScrollArea className="w-64 rounded-md border whitespace-nowrap">
  <div className="flex p-4 gap-4">
    {Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`).map((item) => (
      <div
        key={item}
        className="w-32 shrink-0 rounded-md border p-4 text-sm font-medium"
      >
        {item}
      </div>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

API Reference

ScrollArea

Prop	Type	Default	Description
`type`	`"auto" \| "always" \| "scroll" \| "hover"`	—	Controls when the scrollbar is visible. `"auto"` shows it only when content overflows, `"always"` keeps it visible, `"scroll"` shows it while scrolling, and `"hover"` shows it on hover.

ScrollBar

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	The axis along which the scrollbar is rendered.