frontmatter - 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/frontmatter.json

shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/frontmatter.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 { parseFrontmatter, readList, readString } from "@sushindustries/ui";

export function loadPost(raw: string) {
	const [, frontmatterBlock, body] = raw.split("---");
	const meta = parseFrontmatter(frontmatterBlock);

	return {
		title: readString(meta, "title", "Untitled"),
		tags: readList(meta, "tags"),
		draft: readString(meta, "draft") === "true",
		body: body?.trim() ?? "",
	};
}

tsx

What this example is not

Not how the split should be done for real content - split("---") breaks on a post whose body also contains a --- rule. The site's own catalogue uses the boundary @tanstack/markdown already finds while parsing, rather than re-finding it with a string split.