# Shadcn External Scroll

> Framed by an external ScrollArea

- Type: example, free and open source (MIT)
- Component: [Code Block](https://reui.io/components/code-block.md)
- Page: https://reui.io/components/code-block/c-code-block-26
- Docs (Base UI): https://reui.io/docs/components/base/code-block.md
- Docs (Radix UI): https://reui.io/docs/components/radix/code-block.md
- MCP: `get_example("c-code-block-26")`
- Registry item: https://reui.io/r/styles/base-nova/c-code-block-26.json
- Uses: Badge, Card, Code Block, Scroll Area

## Best for

A Card with 3 changed files that size to their content, scrolled together by one fixed height ScrollArea, each with count badges

## Agent notes

- The `added` and `removed` counts in `files` are invented beside each final source; take them from your diff

## When not to use

- Changed files with real hunks and paired old and new line numbers: use [Unified Patch](https://reui.io/components/code-block/c-code-block-18.md) (`get_example("c-code-block-18")`)

## Install

```bash
npx shadcn@latest add @reui/c-code-block-26
```

## About Shadcn Code Block

### When to use

- Assistant replies and agent output that stream code, or lines a reader picks to ask about
- Code review of diffs, git patches and diagnostics, with accept, reject and fix actions
- Docs snippets and terminal or test logs with line numbers, copy, wrap, folding and search

### When not to use

- A full assistant conversation screen with thread list, transcript and composer: use the [AI Chat blocks](https://reui.io/blocks/ai-agents/ai-chat.md)
- A discount or promo code shown for a shopper to copy at checkout: use the [Coupon blocks](https://reui.io/blocks/ecommerce/coupon.md)
- A release console with environment lanes, a deploy history grid and streaming logs: use the [Dev Ops blocks](https://reui.io/blocks/solutions/dev-ops.md)

### Agent notes

- Line specs such as `highlightedLines`, `diff` and `folded` count source lines from 1, whatever `startLine` prints in the gutter
- `maxLines` caps height only on the built-in surface; with `CodeBlockContent` inside your own `ScrollArea`, cap that viewport yourself
- Hoist `transformers` to module scope; a new array on every render re-tokenizes the whole file

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.