---
title: Scroll Area
description: Render styled overflow regions and scrollbars
type: reference
summary: Compose ScrollArea and ScrollBar for constrained custom interfaces.
url: /docs/components/scroll-area
source: apps/template/content/docs/components/scroll-area.mdx
related:
  - /docs/components
---

# Scroll Area

import {
  ScrollArea,
  ScrollBar,
} from "@vercel/geistdocs/components/scroll-area";

<div className="not-prose my-6 flex min-h-48 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <ScrollArea className="h-32 w-full max-w-sm rounded-md border border-gray-400 p-4">
    <div className="space-y-3">
      <p>Overview</p>
      <p>Installation</p>
      <p>Configuration</p>
      <p>Deployment</p>
      <p>Troubleshooting</p>
      <p>Reference</p>
    </div>
    <ScrollBar />
  </ScrollArea>
</div>

```tsx
import {
  ScrollArea,
  ScrollBar,
} from "@vercel/geistdocs/components/scroll-area";
```

Keep keyboard and native scrolling available; use the component to style overflow rather than to replace browser scrolling behavior.