# Scroll area: Both axes

> `scrollbars="both"` shows both scrollbars and a corner where they meet, and fades all four edges.

Example: https://hextaui.com/docs/scroll-area/examples/both
Component docs: https://hextaui.com/docs/scroll-area.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/scroll-area-both.json
```

This adds `components/examples/scroll-area/both.tsx` with the Scroll area component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/scroll-area/both.tsx"
import { ScrollArea } from "@/components/ui/scroll-area"

export function ScrollAreaBoth() {
  return (
    <ScrollArea
      scrollbars="both"
      className="h-64 w-full max-w-md rounded-lg border"
    >
      <div className="grid w-max grid-cols-[repeat(10,6rem)] gap-2 p-3">
        {Array.from({ length: 100 }, (_, index) => (
          <div
            key={index}
            className="grid aspect-square place-items-center rounded-md bg-muted text-sm"
          >
            {index + 1}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}
```

## Props in this example

### ScrollArea

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `scrollbars` | `"vertical" \| "horizontal" \| "both"` | `"vertical"` |  |
| `className` | `string \| (state) => string` | – |  |

## More Scroll area examples

- [Peek](https://hextaui.com/docs/scroll-area/examples/peek.md)
- [Text](https://hextaui.com/docs/scroll-area/examples/text.md)
- [Start at the bottom](https://hextaui.com/docs/scroll-area/examples/chat.md)
- [Horizontal](https://hextaui.com/docs/scroll-area/examples/horizontal.md)
- [Dynamic content](https://hextaui.com/docs/scroll-area/examples/dynamic.md)
- [On a colored surface](https://hextaui.com/docs/scroll-area/examples/colored-surface.md)
- [Inside a sheet](https://hextaui.com/docs/scroll-area/examples/sheet.md)
- [Without fade](https://hextaui.com/docs/scroll-area/examples/without-fade.md)
- [Right to left](https://hextaui.com/docs/scroll-area/examples/rtl.md)