# Shadcn File Tabs

> File tabs in a dense frame

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

## Best for

Snippets in tsx, Python, SQL and bash behind file tabs in a dense Frame header, each a ghost block with floating copy

## When not to use

- Two versions of one file stacked for a before and after review: use [Before & After](https://reui.io/components/code-block/c-code-block-16.md) (`get_example("c-code-block-16")`)

## Install

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

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