Docs › Components › Scroll Area

Shadcn Scroll Area

The shadcn/ui Scroll Area is a container with a styled, consistent scrollbar across browsers, built with Tailwind CSS v4. It keeps native scrolling behavior while giving overflowing lists and panels a clean, custom scrollbar. Scroll areas appear in menus, sidebars, and lists across ShadcnStore blocks.

Key features

• Styled, cross-browser scrollbar that preserves native scrolling.
• Vertical and horizontal orientation.
• Works for lists, menus, sidebars, and code panels.
• Dark-mode ready with Tailwind.

Installation

npx shadcn@latest add scroll-area

Usage

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

export function Example() {
  return (
    <ScrollArea className="h-56 w-56 rounded-md border p-4">
      {/* long content */}
    </ScrollArea>
  )
}

Horizontal scroll

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max gap-4 p-4">{/* items */}</div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

Accessibility

• Native keyboard and wheel scrolling is preserved; do not trap focus.
• Ensure content remains reachable if the custom scrollbar is hidden.
• Give scrollable regions a sensible height so keyboard users can scroll.

When to use the Scroll Area

Use a Scroll Area when a bounded region overflows and you want a consistent scrollbar: a long menu, a sidebar, a chat list, or a code block. For whole-page scrolling, rely on the browser. For paged data, use Pagination.

Used in these blocks

• App shells: scrollable sidebars.
• Datatables: scrollable panels.
• Apps: lists and chat history.

Related components

A Scroll Area often wraps a Command list, a Dropdown Menu, or a Card body, and uses a Separator between items.

FAQ

What is the shadcn scroll area used for?

The Scroll Area is a container with a styled, consistent scrollbar across browsers, used for lists, panels, and menus with overflow.

How do I make a horizontal scroll area?

Give the content a row layout and add a ScrollBar with orientation set to horizontal.

Does the scroll area affect keyboard scrolling?

No. It preserves native keyboard and wheel scrolling; it only restyles the scrollbar.

Why is my content not scrolling?

Set a fixed height (or max-height) on the ScrollArea so the inner content can overflow.