# CodeStage

> A titled mono panel for install samples, CLI output, or code snippets on a landing, optionally highlighted, numbered, or split into file tabs that switch through a radio group alone.

```ts
import { CodeStage } from "@sdxc/ui/landing";
```

Renders an optional titled or tabbed header and a mono body that keeps every
line intact and scrolls sideways inside the panel when a line outgrows it.
The stage takes its content's height, so beside taller copy it sits at the top.

## Examples

```tsx
<CodeStage title="install.sh" actions={copyControl}>bun add @sdxc/ui</CodeStage>
```

```tsx
<CodeStage variant="slab" language="ts" lineNumbers>{snippet}</CodeStage>
```

```tsx
<CodeStage tabs={[{ label: "worker.ts", content: worker, language: "ts" }]} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `variant?` | `"code" \| "terminal" \| "slab"` | Surface treatment. Defaults to DEFAULT_VARIANT. |
| `title?` | `RemixNode` | Optional title or path shown in the header; tabs take its place. |
| `actions?` | `RemixNode` | Optional trailing control in the header — typically a copy button. |
| `language?` | `string` | Highlights string content as this language (any name or alias `@sdxc/highlight` resolves). Element children render as given. |
| `lineNumbers?` | `boolean` | Numbers each line in a gutter beside the code. Numbering reads lines from a string; any other content renders unnumbered. |
| `tabs?` | `Tab[]` | Files shown as header tabs, switched by a radio group with no script; the first is selected and the stage keeps the tallest file's height. |
| `name?` | `string` | Radio group name for `tabs`; defaults to an id unique to this stage. |
| `parts?` | `PartsProps` | Per-part styling for header and body. |
| `children?` | `RemixNode` | Mono body content when `tabs` is omitted — a command, snippet, or output. |

Also accepts everything in `Omit<TagProps<"div">, "title">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Variant` | `"code" \| "terminal" \| "slab"` | Surface treatment: a raised code card, a darker terminal panel, or a slab that stays dark in both schemes and holds a translucent code sheet. |