Shadcn Scroll Area

React scroll area for custom styled scrollbars with native behavior. Built with TypeScript and Tailwind CSS for Next.js using Radix UI.

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. This shadcn/ui scroll area fixes that—consistent, styled scrollbars everywhere without breaking any of the native behavior users expect from your React applications.

Scroll area showcase

Clean scrollbar that matches your design:

Loading component...

Built on Radix UI ScrollArea with native scrolling behavior preserved. This free open source component gives you styled scrollbars without breaking keyboard navigation, touch scrolling, or any of the native stuff people expect. Styled with Tailwind CSS to match your design system instead of dealing with browser-specific scrollbar quirks.

npx shadcn@latest add scroll-area

Why custom scrollbars actually solve design problems

Here's the thing—default scrollbars can absolutely ruin a carefully designed interface. Think about how jarring it is when your beautiful, minimal design suddenly has a thick Windows scrollbar or a macOS one that disappears when users need to see their scroll position. Custom scrollbars give you the visual consistency your interface deserves.

But here's what makes this different from other custom scrollbar solutions: it preserves all the native behavior users depend on. No weird JavaScript-powered scrolling that feels off. No breaking keyboard navigation or touch gestures. Your users get the visual consistency you want with the performance and accessibility they expect.

This free shadcn scroll area handles the complex parts—cross-browser compatibility, overlay positioning, native behavior preservation—while you focus on creating interfaces that look consistent everywhere. Whether you're building chat applications, data tables, or code editors in your Next.js applications, scrollbars that match your design keep the experience seamless in your JavaScript projects.

Common scroll area patterns you'll actually use

Horizontal gallery

Perfect for image carousels and media galleries:

Loading component...

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 className="shrink-0" key={artwork.artist}>              <div className="overflow-hidden rounded-md">                <Image                  alt={`Photo by ${artwork.artist}`}                  className="aspect-[3/4] h-fit w-fit object-cover"                  height={250}                  src={artwork.art}                  width={200}                />              </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 { Send } from "lucide-react"import * as React from "react"import { Avatar, AvatarFallback } from "~/components/ui/avatar"import { Button } from "~/components/ui/button"import { Input } from "~/components/ui/input"import { ScrollArea } from "~/components/ui/scroll-area"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 className={`flex gap-3 ${msg.isMe ? "flex-row-reverse" : ""}`} key={msg.id}>                <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            className="flex gap-2"            onSubmit={e => {              e.preventDefault()              sendMessage()            }}          >            <Input              className="flex-1"              onChange={e => setInput(e.target.value)}              placeholder="Type a message..."              value={input}            />            <Button size="icon" type="submit">              <Send className="h-4 w-4" />            </Button>          </form>        </div>      </div>    </div>  )}

Code viewer

Syntax highlighted code with both scrollbars:

Loading component...

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 className="flex" key={i}>                    <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 className={colorClass} key={i}>          {actualContent}        </span>      )    })}

Data table with overflow

Tables that handle wide content gracefully:

Loading component...

Long forms and content that fits any dialog:

Loading component...

Features

This free open source scroll area component includes everything you need:

TypeScript-first - Full type safety with scroll events and state management
Radix UI powered - Battle-tested native scrolling behavior and performance
Cross-browser consistent - Same appearance on Mac, Windows, Linux, and mobile
Tailwind CSS styled - Customize with utilities, not fighting browser defaults
Native behavior preserved - Keyboard, touch, and mouse wheel all work naturally
Overlay scrollbars - No layout shift when scrollbars appear or disappear
Auto-hide options - Show on hover, always visible, or scroll-based visibility
RTL support - Works properly with right-to-left language layouts

API Reference

Core Components

Component	Purpose	Key Props
`ScrollArea`	Root container	`type` for visibility, `scrollHideDelay` for timing
`ScrollBar`	Custom scrollbar	`orientation` for direction, styling props

Visibility Options

Type	Behavior	Use Case
`"hover"`	Show on hover (default)	Clean interface with scroll feedback
`"always"`	Always visible	When users need scroll position awareness
`"auto"`	Browser default behavior	Native scrollbar replacement only
`"scroll"`	Visible while scrolling	Minimal with activity indication

Common Configuration

Setting	Purpose	Implementation
`scrollHideDelay`	Auto-hide timing	Milliseconds before scrollbar fades
`className`	Custom styling	Tailwind classes for appearance
`dir`	Reading direction	"ltr" or "rtl" for internationalization

Production tips

Set explicit heights and let content overflow naturally. This free shadcn/ui scroll area needs defined container dimensions to know when scrolling is necessary. This TypeScript component handles the overflow—you provide containers with clear boundaries that make sense for your content and layout in your Next.js applications.

Consider mobile users who don't see scrollbars until they scroll. Touch interfaces hide scrollbars by default, so don't rely on visible scrollbars for navigation cues. This open source shadcn component adapts to mobile automatically, but your content design should indicate scrollable areas through other visual means.

Mind the corners where scrollbars meet. When you have both horizontal and vertical scrollbars, that little corner piece needs attention. This JavaScript component handles the technical positioning—you handle the visual styling to ensure corners don't look awkward or break your design consistency.

Test with real content lengths and edge cases. Make sure your scroll areas handle very short content (no unnecessary scrollbars), very long content (proper overflow), and dynamic content changes. The Tailwind CSS styled component adapts automatically, but edge cases reveal design assumptions.

Preserve scroll position for user workflows. In chat applications, data tables, and other interactive interfaces, users expect scroll position to persist through updates. This component maintains native scroll behavior—your application logic handles position preservation during content changes.

Integration with other components

Scroll areas naturally work with Dialog components for modal content that might overflow and Sheet components for side panels with long navigation lists in your React applications. Use Card components within scroll areas for organized content sections.

For data-heavy interfaces, combine scroll areas with DataTable components for table overflow or Command components for searchable lists. This open source pattern creates professional data browsing experiences without layout constraints.

When building chat or messaging interfaces, pair scroll areas with Avatar components for user lists or Badge components for status indicators. Separator components help organize long scrollable content into logical sections.

For code and documentation, use scroll areas with Tabs components for multiple content views or Breadcrumb components for navigation context. Your JavaScript application can compose these shadcn components while maintaining consistent scroll behavior across different content types.

Shadcn Scroll Area

When should I use Scroll Area vs native scrollbars?

How do scroll areas work on mobile devices?

Do custom scroll areas impact scrolling performance?

Do scroll areas support keyboard navigation?

Can I nest scroll areas or use them in complex layouts?

Do scroll areas work with right-to-left languages?

How do I customize scroll area appearance?

Are custom scroll areas accessible to screen readers?