106k
New

Scroll Area

PreviousNext

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

Radix UIBase UI
import * as React from "react"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

Installation

pnpm dlx shadcn@latest add scroll-area

Usage

import { ScrollArea } from "@/components/ui/scroll-area"
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>

Examples

Horizontal

Use ScrollBar with orientation="horizontal" for horizontal scrolling.

import * as React from "react"
import Image from "next/image"
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API Reference

See the Base UI Scroll Area documentation.