SegmentedStage
A pill segmented control over a media stage, the switcher a hero puts between its calls to action and the product.
View code
<LandingHero
title="Know it is down before your users do"
description="Checks from six regions, and a status page your customers trust."
actions={…}
media={
<SegmentedStage name="hero-views" aria-label="Product views">
<SegmentedStage.Item value="status" label="Status page" defaultChecked>
<ProductFrame lights title="Status" url="status.example.com">
<StatusBoard />
</ProductFrame>
</SegmentedStage.Item>
<SegmentedStage.Item value="incident" label="Incidents">
<ProductFrame lights title="Incident" url="app.beacon.dev">
<IncidentCard />
</ProductFrame>
</SegmentedStage.Item>
<SegmentedStage.Item value="api" label="API">
<CodeStage variant="slab" title="create-monitor.ts" language="ts">{snippet}</CodeStage>
</SegmentedStage.Item>
</SegmentedStage>
}
/>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.
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
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.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { SegmentedStage } from "@sdxc/ui/landing";Renders the control and the stage from one list of items: each item draws its tab in the control and its panel in the stage. Panels share one grid cell, so the stage is as tall as its tallest panel and switching never moves the page below.
Composition
The parts the component publishes, each a static property of the host.
SegmentedStageSegmentedStage.ItemOne tab and panel pair.
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 | Radio group name; unique per page so several stages stay independent. |
"aria-label" | string | Yes | Accessible name for the control. Required — the library ships no copy. |
align | "start" | "center" | No | Where the control sits over the stage. Defaults to DEFAULT_ALIGN. |
children | RemixNode | Yes | Two or more SegmentedStage.Item entries. |
Also accepts everything in TagProps<"div">.
SegmentedStage.Item
| Prop | Type | Required | Description |
|---|---|---|---|
value | string | Yes | Radio value for this tab and panel pair. |
label | RemixNode | Yes | Visible tab label. |
defaultChecked | boolean | No | Marks the item selected on load. Exactly one item in a stage should pass it. |
children | RemixNode | Yes | Media the tab reveals: a product frame, a code stage, a screenshot. |
Types
| Name | Values | What it decides |
|---|---|---|
Align | "start" | "center" | Edge the control sits on: centred over the stage, or flush with a start-aligned hero's copy. |
Part | "tab" | "panel" | Which half of the stage an item is drawing: its tab in the control, or its panel. |