Scroll Area

Augments native scroll functionality for custom, cross-browser styling. Built for React applications with Next.js integration and TypeScript support.

You know how scrollbars look different on every OS and browser? Mac has those disappearing ones, Windows has the chunky ones, and don't even get me started on mobile. ScrollArea fixes that - consistent, styled scrollbars everywhere.

Vertical scrolling with custom scrollbar

Clean scrollbar that matches your design:

Loading component...

Built on Radix UI ScrollArea with native scrolling behavior preserved. This free open source React component gives you styled scrollbars without breaking keyboard navigation, touch scrolling, or any of the native stuff people expect.

npx shadcn@latest add scroll-area

Why custom scrollbars matter

Default scrollbars can ruin a carefully designed interface. ScrollArea lets you fix that:

Consistent everywhere - Same look on Mac, Windows, Linux, mobile
Native behavior - All the keyboard and touch stuff still works
No layout shift - Scrollbar overlays content, doesn't push it
Auto-hide options - Show on hover, always visible, your choice
Performance first - Uses native scrolling, no janky transforms
RTL ready - Works properly with right-to-left layouts

Useful scroll area patterns

Horizontal gallery

Perfect for image carousels and media galleries:

Loading component...

import * as React from "react"import Image from "next/image"import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"export interface Artwork {  artist: string  art: string}export const works: Artwork[] = [  {    artist: "Ornella Binni",    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",  },  {    artist: "Tom Byrom",    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",  },  {    artist: "Vladimir Malyavko",    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",  },  {    artist: "Mike Dorner",    art: "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?auto=format&fit=crop&w=300&q=80",  },  {    artist: "Alvan Nee",    art: "https://images.unsplash.com/photo-1592194996308-7b43878e84a6?auto=format&fit=crop&w=300&q=80",  },]export default function ScrollAreaHorizontalDemo() {  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <ScrollArea className="w-96 rounded-md border whitespace-nowrap">        <div className="flex w-max space-x-4 p-4">          {works.map((artwork) => (            <figure key={artwork.artist} className="shrink-0">              <div className="overflow-hidden rounded-md">                <Image                  src={artwork.art}                  alt={`Photo by ${artwork.artist}`}                  className="aspect-[3/4] h-fit w-fit object-cover"                  width={200}                  height={250}                />              </div>              <figcaption className="text-muted-foreground pt-2 text-xs">                Photo by{" "}                <span className="text-foreground font-semibold">                  {artwork.artist}                </span>              </figcaption>            </figure>          ))}        </div>        <ScrollBar orientation="horizontal" />      </ScrollArea>    </div>  )}

Chat messages

Scrollable message history that stays at the bottom:

Loading component...

"use client"import * as React from "react"import { ScrollArea } from "@/components/ui/scroll-area"import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"import { Button } from "@/components/ui/button"import { Input } from "@/components/ui/input"import { Send } from "lucide-react"const initialMessages = [  { id: 1, user: "Alex", message: "Hey team! How's the project going?", time: "10:00 AM", isMe: false },  { id: 2, user: "You", message: "Going great! Just finished the API integration", time: "10:02 AM", isMe: true },  { id: 3, user: "Sarah", message: "Nice work! I'm wrapping up the UI components", time: "10:03 AM", isMe: false },  { id: 4, user: "You", message: "Perfect, should we sync up later today?", time: "10:05 AM", isMe: true },  { id: 5, user: "Alex", message: "Sounds good. How about 2 PM?", time: "10:06 AM", isMe: false },  { id: 6, user: "Sarah", message: "Works for me! 👍", time: "10:07 AM", isMe: false },  { id: 7, user: "You", message: "Great, see you both then", time: "10:08 AM", isMe: true },  { id: 8, user: "Alex", message: "Just pushed my changes to the staging branch", time: "11:30 AM", isMe: false },  { id: 9, user: "Sarah", message: "Reviewing now...", time: "11:32 AM", isMe: false },  { id: 10, user: "You", message: "I'll test it after lunch", time: "11:35 AM", isMe: true },]export default function ScrollAreaChat() {  const [messages, setMessages] = React.useState(initialMessages)  const [input, setInput] = React.useState("")  const scrollRef = React.useRef<HTMLDivElement>(null)  React.useEffect(() => {    if (scrollRef.current) {      scrollRef.current.scrollTop = scrollRef.current.scrollHeight    }  }, [messages])  const sendMessage = () => {    if (input.trim()) {      const newMessage = {        id: messages.length + 1,        user: "You",        message: input,        time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),        isMe: true      }      setMessages([...messages, newMessage])      setInput("")    }  }  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="w-full max-w-md border rounded-lg">        <div className="border-b p-3">          <h3 className="font-semibold">Team Chat</h3>        </div>        <ScrollArea className="h-[300px] p-4" ref={scrollRef}>          <div className="space-y-4">            {messages.map((msg) => (              <div                key={msg.id}                className={`flex gap-3 ${msg.isMe ? 'flex-row-reverse' : ''}`}              >                <Avatar className="h-8 w-8">                  <AvatarFallback>                    {msg.user[0]}                  </AvatarFallback>                </Avatar>                <div className={`flex flex-col gap-1 ${msg.isMe ? 'items-end' : ''}`}>                  <div className={`rounded-lg px-3 py-2 max-w-[250px] ${                    msg.isMe                       ? 'bg-primary text-primary-foreground'                       : 'bg-muted'                  }`}>                    <p className="text-sm">{msg.message}</p>                  </div>                  <span className="text-xs text-muted-foreground">{msg.time}</span>                </div>              </div>            ))}          </div>        </ScrollArea>        <div className="border-t p-3">          <form             onSubmit={(e) => {              e.preventDefault()              sendMessage()            }}            className="flex gap-2"          >            <Input              value={input}              onChange={(e) => setInput(e.target.value)}              placeholder="Type a message..."              className="flex-1"            />            <Button type="submit" size="icon">              <Send className="h-4 w-4" />            </Button>          </form>        </div>      </div>    </div>  )}

Code viewer

Syntax highlighted code with both scrollbars:

Loading component...

import * as React from "react"import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"const codeExample = `import * as React from 'react'import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'import { Badge } from '@/components/ui/badge'import { Button } from '@/components/ui/button'import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'export function DashboardComponent() {  const [isLoading, setIsLoading] = React.useState(false)  const [data, setData] = React.useState<DashboardData | null>(null)  React.useEffect(() => {    async function fetchDashboardData() {      setIsLoading(true)      try {        const response = await fetch('/api/dashboard')        const result = await response.json()        setData(result)      } catch (error) {        console.error('Failed to fetch dashboard data:', error)      } finally {        setIsLoading(false)      }    }    fetchDashboardData()  }, [])  if (isLoading) {    return <div className="flex items-center justify-center h-screen">Loading dashboard...</div>  }  return (    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">      <Card>        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">          <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="h-4 w-4 text-muted-foreground">            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />          </svg>        </CardHeader>        <CardContent>          <div className="text-2xl font-bold">$45,231.89</div>          <p className="text-xs text-muted-foreground">+20.1% from last month</p>        </CardContent>      </Card>    </div>  )}`export default function ScrollAreaCode() {  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="w-full max-w-3xl">        <div className="rounded-lg border bg-muted/30">          <div className="border-b px-4 py-2 flex items-center justify-between">            <div className="flex items-center gap-2">              <div className="flex gap-1.5">                <div className="h-3 w-3 rounded-full bg-red-500" />                <div className="h-3 w-3 rounded-full bg-yellow-500" />                <div className="h-3 w-3 rounded-full bg-green-500" />              </div>              <span className="text-sm text-muted-foreground ml-2">dashboard.tsx</span>            </div>            <span className="text-xs text-muted-foreground">TypeScript React</span>          </div>          <ScrollArea className="h-[300px] w-full">            <pre className="p-4">              <code className="text-sm">                {codeExample.split('\n').map((line, i) => (                  <div key={i} className="flex">                    <span className="text-muted-foreground select-none mr-4 text-right w-8">                      {i + 1}                    </span>                    <span className="flex-1">                      {highlightSyntax(line)}                    </span>                  </div>                ))}              </code>            </pre>            <ScrollBar orientation="horizontal" />            <ScrollBar orientation="vertical" />          </ScrollArea>        </div>      </div>    </div>  )}function highlightSyntax(line: string) {  // Simple syntax highlighting  return line    .replace(/('.*?'|".*?")/g, '<span class="text-green-500">$1</span>')    .replace(/\b(import|from|export|function|const|let|var|if|else|return|async|await|try|catch|finally)\b/g, '<span class="text-blue-500">$1</span>')    .replace(/\b(React|CardContent|CardHeader|CardTitle|Card|Badge|Button|Avatar)\b/g, '<span class="text-yellow-500">$1</span>')    .split('<span')    .map((part, i) => {      if (i === 0) return part      const [className, content] = part.split('>')      const actualContent = content?.replace('</span>', '') || ''      const colorClass = className.replace('class="', '').replace('"', '')      return <span key={i} className={colorClass}>{actualContent}</span>    })}

These patterns solve real problems. Image galleries that don't break on mobile, chat interfaces that feel native, code viewers that handle long lines properly.

Perfect for constrained spaces

Works great anywhere you need scrolling in a fixed area - sidebars, modals, chat windows, dropdown menus, data tables. The kind of places where you need control over how scrolling looks and feels.

Drops right into Next.js projects. Full TypeScript support. Styled with Tailwind CSS to match the shadcn design system.

Built on Radix UI

Uses Radix UI ScrollArea under the hood, which does it right:

Overlay scrollbars - Don't take up space in your layout
Native scrolling - No weird JS-powered scrolling
Pointer behavior - Only intercepts when dragging scrollbar
Keyboard unaffected - Page Up/Down, arrows all work normally
Touch friendly - Swipe scrolling works as expected
Corner piece - That little square where scrollbars meet

API Reference

ScrollArea

The root container that wraps scrollable content.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`type`	`"auto" \| "always" \| "scroll" \| "hover"`	`"hover"`	Scrollbar visibility behavior
`scrollHideDelay`	`number`	`600`	Hide delay in ms for hover type
`dir`	`"ltr" \| "rtl"`	`"ltr"`	Reading direction

ScrollBar

The scrollbar component (imported separately when needed).

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Scrollbar direction

Data attributes:

[data-state]: "visible" | "hidden"
[data-orientation]: "vertical" | "horizontal"

Visibility Types

Type	Behavior	Use Case
`"auto"`	Show when content overflows	Default browser behavior
`"always"`	Always visible	When users need to see scroll position
`"scroll"`	Visible while scrolling	Clean look with feedback
`"hover"`	Visible on hover	Maximum content space

Common Patterns

Pattern	Use Case	Implementation
Fixed height list	Sidebar navigation	Set height on ScrollArea
Horizontal scroll	Image gallery	Add ScrollBar with horizontal orientation
Both scrollbars	Data tables, code	Add both vertical and horizontal ScrollBar
Chat container	Message lists	ScrollArea with auto-scroll to bottom
Modal content	Long forms	ScrollArea inside dialog

Styling Scrollbars

The scrollbar can be styled with Tailwind classes:

<ScrollArea className="h-[200px]">
  {/* Content */}
  <ScrollBar className="w-2.5" /> {/* Thin scrollbar */}
</ScrollArea>

Make scrolling feel right

Few things to keep in mind:

Set explicit height - ScrollArea needs a height to know when to scroll
Consider mobile - Touch users don't see scrollbars until they scroll
Add padding - Content shouldn't touch the edges
Mind the corner - Where scrollbars meet can look weird
Test with long content - Make sure it handles edge cases
Preserve scroll position - Important for chat and infinite lists
Show scroll hints - Shadows or gradients can indicate more content
Respect preferences - Some users need scrollbars always visible

Reactscroll-area

Reactseparator

Reactscroll-area

Reactscroll-area

Reactavatar

Reactbutton

Reactinput

Reactscroll-area

Reactcard

Reactbadge

Reactbutton

Reactavatar

On this page