InstallTabs
Package-manager or language chooser plus a command row.
View code
<InstallTabs name="preview-install" aria-label="Package manager">
<InstallTabs.Option value="npm" label="npm" defaultChecked>
npm add @beacon/cli
</InstallTabs.Option>
<InstallTabs.Option value="bun" label="bun">
bun add @beacon/cli
</InstallTabs.Option>
<InstallTabs.Option value="pnpm" label="pnpm">
pnpm add @beacon/cli
</InstallTabs.Option>
</InstallTabs>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 { InstallTabs } from "@sdxc/ui/landing";Renders a radio-driven dialect strip. Nest InstallTabs.Option children; the checked option's command row reveals via CSS.
Composition
The parts the component publishes, each a static property of the host.
InstallTabsInstallTabs.OptionOne dialect: a radio, its label, and a command row that shows when checked.
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 dialects. Required so multiple strips on one page stay independent. |
"aria-label" | string | Yes | Accessible name for the strip. Required — the library ships no copy. |
children | RemixNode | Yes | One or more InstallTabs.Option dialects. |
Also accepts everything in TagProps<"form">.
InstallTabs.Option
| Prop | Type | Required | Description |
|---|---|---|---|
value | string | Yes | Radio value written for this dialect. |
label | RemixNode | Yes | Visible tab label for the dialect. |
defaultChecked | boolean | No | Marks this dialect as the initially selected one. Only one option in a strip should pass defaultChecked. |
actions | RemixNode | No | Optional trailing control beside the command — typically a copy button the page supplies. |
children | RemixNode | Yes | Command or snippet shown when this dialect is selected. |
Also accepts everything in TagProps<"div">.