DocsHub

The docs home.

Help center

How can we help?

Watch your sites, page the right person, and keep customers posted.

Start here

Quickstart
Add your first monitor
Paste a URL and get paged the first time it stops answering.Read the guide
API
Create monitors from code
Get a token, then create, pause and delete monitors over HTTP.Read the overview

Browse by topic

Popular articles

View code

tsx

<DocsHub
	eyebrow="Help center"
	title="How can we help?"
	lead="Watch your sites, page the right person, and keep customers posted."
	search={
		<SearchField aria-label="Search the docs">
			<SearchField.Input name="q" placeholder="Search the docs" />
		</SearchField>
	}
	labels={{
		start: "Start here",
		sections: "Browse by topic",
		topics: "Popular topics",
		popular: "Popular articles",
	}}
	formatCount={(count) => (count === 1 ? "1 page" : `${count} pages`)}
	topics={[
		{ title: "SMS alerts", href: "/examples/docs/alerts/sms" },
		{ title: "Check intervals", href: "/examples/docs/monitors/intervals" },
		{ title: "Custom domains", href: "/examples/docs/status-pages/domains" },
		{ title: "Invite your team", href: "/examples/docs/teams/invite" },
	]}
	start={[
		{
			eyebrow: "Quickstart",
			title: "Add your first monitor",
			href: "/examples/docs/quickstart",
			description: "Paste a URL and get paged the first time it stops answering.",
			cta: "Read the guide",
		},
		{
			eyebrow: "API",
			title: "Create monitors from code",
			href: "/examples/docs/api/overview",
			description: "Get a token, then create, pause and delete monitors over HTTP.",
			cta: "Read the overview",
		},
	]}
	sections={[
		{ title: "Monitors", href: "/examples/docs/monitors", description: "What gets checked, from where, and how often.", count: 9 },
		{ title: "Alerts", href: "/examples/docs/alerts", description: "Who gets paged, on which channel, and when.", count: 6 },
		{ title: "Status pages", href: "/examples/docs/status-pages", description: "Tell customers what is happening.", count: 4 },
		{ title: "Fix a problem", href: "/examples/docs/troubleshooting", description: "Alerts while your site is up, missing emails.", count: 7 },
	]}
	popular={[
		{ title: "I'm getting alerts but my site is up", href: "/examples/docs/troubleshooting/false-alerts" },
		{ title: "Send alerts to Slack", href: "/examples/docs/alerts/slack" },
		{ title: "Change how often a monitor runs", href: "/examples/docs/monitors/intervals" },
	]}
/>

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

Routes a reader into the docs by task. Every card is one link, start cards are larger than section cards, and block headings sit one level under the title, so the outline reads h1 → h2 → h3 with no scope around it and follows any HeadingScope that wraps it.

Props

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

Prop	Type	Required	Description
`title`	`RemixNode`	Yes	The page title, rendered at the ambient heading level (`<h1>` with no scope around it).
`eyebrow`	`string`	No	Small line above the title ("Documentation").
`lead`	`RemixNode`	No	One or two sentences under the title saying what the docs cover.
`search`	`RemixNode`	No	The app's search field ("How can we help?"), drawn under the lead.
`start`	`StartItem[]`	Yes	The path a newcomer takes, most important first.
`topics`	`Topic[]`	No	Chips under the search for the most asked-about tasks.
`sections`	`Section[]`	Yes
`popular`	`Popular[]`	No
`labels`	`Labels`	Yes
`formatCount`	`(count: number) => string`	No	Words a section's `count` ("12 pages"); a section's own `countLabel` wins over it.

Also accepts everything in Omit<TagProps<"div">, "title">.