doc-aside - examples

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Phone22remthe floor, the narrowest this promises to work at

tanstacktanstack add https://adamjurek.com/r/tanstack/doc-aside.json

shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/doc-aside.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { collectHeadings, DocAside } from "@sushindustries/ui";
import { MarkdownView } from "@sushindustries/ui";

export function DocPage({ source }: { source: string }) {
	const headings = collectHeadings(source);

	return (
		<div className="doc-layout">
			<article>
				<MarkdownView source={source} />
			</article>
			<DocAside headings={headings} />
		</div>
	);
}

tsx

What this example is not

Not a single parse. collectHeadings parses source a second time, separately from MarkdownView's own render - deliberately synchronous and server-side, so the cost lands once in the cached HTML rather than on every client render.