# Shadcn Basic

> Basic scroll area

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

## Best for

A narrow column of 30 version tags under a Releases heading, split by divider lines, that only scrolls up and down

## Agent notes

- Replace `tags` with your own list; each string is also the row `key`, so keep the values unique

## Install

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

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