# Shadcn Focus Walkthrough

> Focus walkthrough

- 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-8
- 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-8")`
- Registry item: https://reui.io/r/styles/base-nova/c-code-block-8.json
- Uses: Badge, Button, Code Block

## Best for

A 3 step tour of a checkout function, chosen with pressed buttons in the header, with a step counter and the other lines dimmed

## Agent notes

- Each `steps` entry pairs a button label with a `lines` range for this sample; rewrite both for your own file

## When not to use

- Emphasis on a few lines while the rest stays at full strength: use [Highlights](https://reui.io/components/code-block/c-code-block-7.md) (`get_example("c-code-block-7")`)

## Install

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

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