markdown-view - 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/markdown-view.json

shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/markdown-view.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 { MarkdownView, type MarkdownBlocks, type ReferenceMap } from "@sushindustries/ui";
import { Showcase } from "./showcase";

const blocks: MarkdownBlocks = {
	showcase: ({ attributes }) => (
		<Showcase demo={attributes.demo} height={Number(attributes.height ?? 420)} />
	),
};

const references: ReferenceMap = {
	Showcase: {
		title: "Showcase",
		href: "/packages/ui/docs/showcase",
		summary: "Renders a component at three widths, with its source.",
	},
};

export function Post({ source }: { source: string }) {
	return <MarkdownView source={source} blocks={blocks} references={references} />;
}

tsx

What this example is not

attributes.height arrives as the string "420", so the block converts it with Number() before handing it to ShowcaseShowcaseA component in a real iframe at every width it has to survive, side by side, with its source and install commands.@sushindustries/ui · docs - MarkdownView never parses attribute values for you.