Reference

@sushindustries/ui

An inline mention that carries a hover card with the target's own summary.

Last updated Aug 17, 20265 min read
View as MarkdownEdit on GitHub

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

Viewport width
Phone22remthe floor, the narrowest this promises to work at
tanstacktanstack add https://adamjurek.com/r/tanstack/reference.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/reference.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 { Ref, type ReferenceMap } from "@sushindustries/ui";

const references: ReferenceMap = {
	Pagination: {
		title: "Pagination",
		href: "/components/pagination",
		summary: "Pages as links, first and last always reachable.",
		meta: "@sushindustries/ui",
	},
};

export function ChangelogEntry() {
	return (
		<p>
			<Ref reference={references.Pagination}>Pagination</Ref> now clamps
			nothing, so a stale page number is the caller's problem again.
		</p>
	);
}
tsx

What this example is not

The automatic version. MarkdownView matches every backtick-quoted mention against a references map on its own; this example builds the same map and wires one Ref by hand, which is what you'd do outside Markdown.

Used byMarkdown ViewMarkdown ViewRenders Markdown with callouts, CSS-only tabs, custom blocks and highlighted code.@sushindustries/ui · content