# Shadcn Scrollbar Gutter

> Scroll area with scrollbar gutter

- 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-5
- 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-5")`
- Registry item: https://reui.io/r/styles/base-nova/c-scroll-area-5.json
- Uses: Scroll Area

## Best for

Full width photo cards that gain side padding once the column overflows, keeping the bar clear of the images

## Agent notes

- `data-has-overflow-x` and `data-has-overflow-y` come from the Base UI root only; the radix `ScrollArea` never sets them, so its gutter stays off

## Install

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

## 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.