# Shadcn Both Scrollbars

> Scroll area with both scrollbars

- Type: example, free and open source (MIT)
- Component: [Scroll Area](https://reui.io/components/scroll-area.md)
- Page: https://reui.io/components/scroll-area/c-scroll-area-3
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/scroll-area.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/scroll-area.md
- MCP: `get_example("c-scroll-area-3")`
- Registry item: https://reui.io/r/styles/base-nova/c-scroll-area-3.json
- Uses: Scroll Area

## Best for

An 8 plan pricing table with a price column and 6 feature columns that pans both across and down

## Agent notes

- Replace `products` and `features` together; a `key` in `features` that names no product field leaves that column blank

## When not to use

- One row of cards or photos that only pans sideways: use [Horizontal](https://reui.io/components/scroll-area/c-scroll-area-2.md) (`get_example("c-scroll-area-2")`)
- Thousands of records that need sorting, paging or virtual rows: use [Data Grid](https://reui.io/components/data-grid.md) (`get_component("data-grid")`)

## Install

```bash
npx shadcn@latest add @reui/c-scroll-area-3
```

## About Shadcn Scroll Area

### When to use

- Fixed height lists and photo columns that scroll inside their own box with a custom scrollbar
- Sideways strips of cards or photos kept to the width of their container
- Wide tables that pan on both axes without widening the page around them

### When not to use

- Section links that light up as the reader scrolls past each heading: use [Scrollspy](https://reui.io/components/scrollspy.md) (`get_component("scrollspy")`)
- A chat transcript that opens on the newest turn and follows streamed replies: use [Message Scroller](https://reui.io/components/message-scroller.md) (`get_component("message-scroller")`)
- Shoppers weighing rival products on price, star rating and specs: use the [Comparison blocks](https://reui.io/blocks/ecommerce/comparison.md)

### Agent notes

- Give the `ScrollArea` root a bounded height or width through `className`, or it grows with its content and never scrolls
- `ScrollArea` draws only the vertical `ScrollBar`; for sideways scrolling pass a `ScrollBar` with `orientation` horizontal as a child

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.