---
id: scroll-area
title: Scroll Area
description: A custom scrollable area component with styled scrollbars.
---

<ComponentPreview id="ScrollArea" />

## Anatomy

<Anatomy id="scroll-area" />

```tsx
<ScrollArea.Root>
  <ScrollArea.Viewport>
    <ScrollArea.Content />
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar>
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>
```

## Required style

It's important to note that the scroll area requires the following styles on the `ScrollArea.Viewport` element to hide
the native scrollbar:

```css
[data-scope='scroll-area'][data-part='viewport'] {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
```

## Examples

### Basic

Create a basic scrollable area with custom scrollbar.

<Example id="basic" />

### Horizontal

Configure the scroll area for horizontal scrolling only.

<Example id="horizontal" />

### Both Directions

Enable scrolling in both horizontal and vertical directions.

<Example id="both-directions" />

### Nested

Scroll areas can be nested within each other for complex layouts.

<Example id="nested" />

## API Reference

### Props

<ComponentTypes id="scroll-area" />

### Context

<ContextType id="scroll-area" />
