Scroll Area

View in Storybook

Explore interactive examples and all component variations in our Storybook.

ScrollArea wraps scrollable content in a custom viewport with consistently styled scrollbars across all browsers and operating systems. It replaces native overflow-auto wherever a uniform cross-platform appearance is needed.

Basic Usage

Set a fixed height on ScrollArea to create a vertically scrollable region. The styled scrollbar appears automatically.

Items

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Horizontal Scroll

Add <ScrollBar orientation="horizontal" /> and use whitespace-nowrap on the inner content to enable horizontal scrolling.

React

TypeScript

Tailwind CSS

Next.js

Radix UI

Zustand

TanStack Query

Storybook

Vite

ESLint

Prettier

Vitest

shadcn/ui

Framer Motion

Zod

Fixed Height List

A contact list pattern with avatar placeholders, names, and email addresses in a fixed-height scrollable container.

AJ

Alice Johnson

alice@example.com

BW

Bob Williams

bob@example.com

CM

Carol Martinez

carol@example.com

DB

David Brown

david@example.com

ED

Emma Davis

emma@example.com

FW

Frank Wilson

frank@example.com

GT

Grace Taylor

grace@example.com

HA

Henry Anderson

henry@example.com

IT

Isabel Thomas

isabel@example.com

JJ

Jack Jackson

jack@example.com

Long Content

Ideal for terms of service, policy text, or any prose that must be contained within a fixed-size box.

Terms of Service

By accessing or using our service, you agree to be bound by these Terms. If you do not agree to all of these Terms, do not use the service.

We reserve the right to update these Terms at any time. Changes become effective immediately upon posting. Your continued use of the service constitutes acceptance of the revised Terms.

You are responsible for maintaining the confidentiality of your account credentials and for all activities that occur under your account.

We may suspend or terminate your access to the service at any time, for any reason, without notice or liability.

All content provided on this service is for informational purposes only. We make no warranties regarding the accuracy or completeness of the information presented.

To the fullest extent permitted by law, we disclaim all warranties, express or implied, including warranties of merchantability and fitness for a particular purpose.

Properties

ScrollArea

Property	Type	Default	Description
className	string	-	Additional CSS classes applied to the root element. Use to set h-* / w-* constraints.
children	ReactNode	-	Scrollable content. Include a <ScrollBar> child for custom orientation.

All props from @radix-ui/react-scroll-area Root are forwarded.

ScrollBar

Property	Type	Default	Description
orientation	"vertical" | "horizontal"	"vertical"	Direction of the scrollbar.
className	string	-	Additional CSS classes for the scrollbar track.

A vertical ScrollBar is rendered automatically inside ScrollArea. Add a second <ScrollBar orientation="horizontal" /> as a child when horizontal scrolling is needed.