TabbedStage

Tabs that reveal one media panel at a time, as a row of pills over the stage or as a rail of steps beside a sticky stage.

Monitors

Monitorsapp.beacon.dev

api.beacon.dev6 regions · 142 ms p95Operational
checkout.beacon.deveu-west · 1.8 s p95Degraded
status.beacon.dev6 regions · 88 ms p95Operational

Alerts

alerts.log

14:02 UTC eu-west checkout.beacon.dev 503, paged on-call

Watch every endpointProbes in six regions check each URL every thirty seconds.

Monitorsapp.beacon.dev

api.beacon.dev6 regions · 142 ms p95Operational
checkout.beacon.deveu-west · 1.8 s p95Degraded
status.beacon.dev6 regions · 88 ms p95Operational

Confirm before pagingA failure pages someone only when two regions agree.

probes.log

14:02:11 eu-west   checkout.beacon.dev  503  1.8 s
14:02:14 us-east   checkout.beacon.dev  503  2.1 s
14:02:14 confirmed by 2 of 6 regions

Page the right personAlerts follow the rotation, and escalate after five quiet minutes.

alerts.log

14:02:15 paged Ana Ruiz (primary, payments)
14:04:40 acknowledged by Ana Ruiz
14:07:02 escalation cancelled

View code

tsx

<TabbedStage name="preview-stage" aria-label="Product views">
	<TabbedStage.Item value="monitors" label="Monitors" icon={<ActivityIcon />} defaultChecked>
		<MonitorList />
	</TabbedStage.Item>
	<TabbedStage.Item value="alerts" label="Alerts" icon={<BellRingIcon />}>
		<CodeStage variant="terminal" title="alerts.log">
			14:02 UTC eu-west checkout.beacon.dev 503, paged on-call
		</CodeStage>
	</TabbedStage.Item>
</TabbedStage>

<TabbedStage name="preview-rail" orientation="vertical" aria-label="From probe to page">
	<TabbedStage.Item
		value="watch"
		label="Watch every endpoint"
		description="Probes in six regions check each URL every thirty seconds."
		defaultChecked
	>
		<MonitorList />
	</TabbedStage.Item>
	<TabbedStage.Item
		value="confirm"
		label="Confirm before paging"
		description="A failure pages someone only when <strong>two regions agree</strong>."
	>
		<CodeStage variant="terminal" title="probes.log">…</CodeStage>
	</TabbedStage.Item>
	<TabbedStage.Item
		value="page"
		label="Page the right person"
		description="Alerts follow the rotation, and escalate after five quiet minutes."
	>
		<CodeStage variant="terminal" title="alerts.log">…</CodeStage>
	</TabbedStage.Item>
</TabbedStage>

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 { TabbedStage } from "@sdxc/ui/landing";

Host for tabs and their panels. Nest TabbedStage.Item children; each item pairs a tab with the media it reveals. A vertical stage wraps itself in a named container so the rail and stage sit side by side where there is room, and stack below.

Composition

The parts the component publishes, each a static property of the host.

TabbedStage
TabbedStage.ItemOne tab + panel pair.

Examples

tsx

<TabbedStage name="how" orientation="vertical" aria-label={t("how.label")}>
	<TabbedStage.Item value="detect" label={t("how.detect")} description={t("how.detect.body")} defaultChecked>
		{detectShot}
	</TabbedStage.Item>
</TabbedStage>

Props

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

Prop	Type	Required	Description
`name`	`string`	Yes	Shared `name` for the radio group that switches panels. Required so multiple stages on one page stay independent.
`"aria-label"`	`string`	Yes	Accessible name for the stage. Required — the library ships no copy.
`orientation`	`"horizontal" \| "vertical"`	No	Tab layout. Defaults to DEFAULT_ORIENTATION.
`children`	`RemixNode`	Yes	One or more TabbedStage.Item entries.

Also accepts everything in TagProps<"div">.

TabbedStage.Item

Prop	Type	Required	Description
`value`	`string`	Yes	Radio value written for this tab/panel pair.
`label`	`RemixNode`	Yes	Visible tab label.
`icon`	`RemixNode`	No	Optional glyph shown before the label.
`description`	`RemixNode`	No	Supporting copy under the label, shown while the item is selected in a vertical stage. A horizontal stage leaves it out.
`defaultChecked`	`boolean`	No	Marks this item as the initially selected one. Only one item in a stage should pass `defaultChecked`.
`children`	`RemixNode`	Yes	Media or staged UI revealed when this tab is selected.

Also accepts everything in TagProps<"div">.

Types

Name	Values	What it decides
`Orientation`	`"horizontal" \| "vertical"`	`horizontal` lays pill tabs over a full-width stage; `vertical` lays a rail of items beside a sticky stage from the `lg` container up, and stacks them below.