CodeStage

A titled mono panel for install samples, CLI output.

monitor.ts

import { createMonitor } from "@beacon/sdk";

let monitor = createMonitor({
	url: "https://api.example.com/health",
	every: "30s",
	regions: ["iad", "fra", "sin"],
});

monitor.on("down", (incident) => incident.page("on-call"));

install.sh

npm add @beacon/cli

$ beacon check https://api.example.com

View code

tsx

<div mix={[vstack({ gap: 4, align: "stretch" })]}>
	<CodeStage variant="slab" title="monitor.ts" language="ts" lineNumbers>
		{snippet}
	</CodeStage>
	<CodeStage title="install.sh">npm add @beacon/cli</CodeStage>
	<CodeStage variant="terminal" title="~">
		$ beacon check https://api.example.com
	</CodeStage>
</div>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

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 variant="slab" language="ts" lineNumbers>{snippet}</CodeStage>

tsx

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

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`variant`	`"code" \| "terminal" \| "slab"`	No	Surface treatment. Defaults to DEFAULT_VARIANT.
`title`	`RemixNode`	No	Optional title or path shown in the header; tabs take its place.
`actions`	`RemixNode`	No	Optional trailing control in the header — typically a copy button.
`language`	`string`	No	Highlights string content as this language (any name or alias `@sdxc/highlight` resolves). Element children render as given.
`lineNumbers`	`boolean`	No	Numbers each line in a gutter beside the code. Numbering reads lines from a string; any other content renders unnumbered.
`tabs`	`Tab[]`	No	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`	No	Radio group name for `tabs`; defaults to an id unique to this stage.
`parts`	`PartsProps`	No	Per-part styling for header and body.
`children`	`RemixNode`	No	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.