CodeTabs

Tabs over code that mirrors a reader's choice — package manager, framework, language.

RemixHono

app/routes.ts

import { route } from "remix/fetch-router";

export const routes = route({
	home: "/",
	monitors: "/monitors/:id",
});

src/index.ts

import { Hono } from "hono";

let app = new Hono();
app.get("/", (c) => c.text("Up"));

export default app;

View code

tsx

<CodeTabs
	syncKey="framework"
	aria-label="Framework"
	tabs={[
		{ label: "Remix", value: "remix", children: <CodeBlock title="app/routes.ts" language="ts" code={remixRoutes} labels={labels} /> },
		{ label: "Hono", value: "hono", children: <CodeBlock title="src/index.ts" language="ts" code={honoApp} labels={labels} /> },
	]}
/>

Demo docs sites

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

Renders the strip of tabs over a stack of panels that share one grid cell, so the set is as tall as its tallest panel and switching never moves the page. The selected tab's underline grows in over 150ms, and holds still under reduced motion.

Props

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

Prop	Type	Required	Description
`tabs`	`readonly Tab[]`	Yes
`syncKey`	`string`	No	Every set with this key on the page switches together, such as `package-manager`.
`persist`	`CodeTabsPersistence`	No	Where a synced choice is remembered between pages: `cookie` lets the server render it (read it with `readCodeTabsCookie` and pass `selected`), `local` restores it after hydration, and `none` only syncs this page. Defaults to `local`.
`selected`	`string`	No	The value of the tab to render selected, such as the reader's remembered choice. Defaults to the first tab.
`"aria-label"`	`string`	Yes	Names the strip of tabs for assistive technology, such as "Package manager".

Also accepts everything in Omit<TagProps<"form">, "children" | "aria-label">.