---
title: Scroll Area
description: A scrollable container with custom scrollbars.
links:
  doc: https://base-ui.com/react/components/scroll-area
  api: https://base-ui.com/react/components/scroll-area#api-reference
---

```tsx
'use client';

import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`
);

export function ScrollAreaDefault() {
  return (
    <ScrollArea className='h-72 w-48 rounded-md border'>
      <div className='p-4'>
        <h4 className='mb-4 text-sm leading-none font-medium'>Tags</h4>
        {tags.map((tag, index) => (
          <div key={tag}>
            <div className='text-sm'>{tag}</div>
            {index < tags.length - 1 && <Separator className='my-2' />}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```

## Installation

```bash
npx shadcn@latest add @fab-ui/scroll-area
```

**Install the following dependencies:**

```bash
npm install @base-ui/react
```

**Copy and paste the following code into your project.**

```tsx
'use client';

import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';

import { cn } from '@/lib/utils';

function ScrollArea({
  className,
  children,
  orientation,
  ...props
}: ScrollAreaPrimitive.Root.Props & {
  orientation?: 'horizontal' | 'vertical' | 'both';
}) {
  return (
    <ScrollAreaPrimitive.Root className='min-h-0' {...props}>
      <ScrollAreaPrimitive.Viewport
        data-slot='scroll-area-viewport'
        className={cn(
          'size-full overscroll-contain rounded-md transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',
          className
        )}
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      {orientation === 'both' ? (
        <>
          <ScrollBar orientation='vertical' />
          <ScrollBar orientation='horizontal' />
        </>
      ) : (
        <ScrollBar orientation={orientation} />
      )}
      <ScrollAreaPrimitive.Corner data-slot='scroll-area-corner' />
    </ScrollAreaPrimitive.Root>
  );
}

function ScrollBar({
  className,
  orientation = 'vertical',
  ...props
}: ScrollAreaPrimitive.Scrollbar.Props) {
  return (
    <ScrollAreaPrimitive.Scrollbar
      data-slot='scroll-area-scrollbar'
      orientation={orientation}
      className={cn(
        'm-0.5 flex opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-hovering:duration-100 data-scrolling:opacity-100 data-scrolling:delay-0 data-scrolling:duration-100 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-1.5',
        className
      )}
      {...props}
    >
      <ScrollAreaPrimitive.Thumb
        data-slot='scroll-area-thumb'
        className='relative flex-1 rounded-full bg-foreground/20'
      />
    </ScrollAreaPrimitive.Scrollbar>
  );
}

export { ScrollArea, ScrollBar };
```

**Update the import paths to match your project setup.**

## Usage

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

```tsx
<ScrollArea className='h-72 w-48 rounded-md border'>
  <div className='p-4'>
    {/* Scrollable content */}
  </div>
</ScrollArea>
```

## Examples

### Horizontal

```tsx
'use client';

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

const items = Array.from({ length: 20 }).map((_, i) => ({
  id: i + 1,
  name: `Item ${i + 1}`,
}));

export function ScrollAreaHorizontal() {
  return (
    <ScrollArea orientation='horizontal' className='w-96 rounded-md border'>
      <div className='flex gap-4 p-4'>
        {items.map((item) => (
          <div
            key={item.id}
            className='flex h-20 w-32 shrink-0 items-center justify-center rounded-md border bg-muted'
          >
            {item.name}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```