Reference

Install commands are on Home, attached from the registry - they are not written here, because a second copy is a copy that goes stale. This tab starts after the install worked.

Use it

import { Ref } from "@sushindustries/ui";

const showcase = {
	title: "Showcase",
	href: "/components/showcase",
	summary: "The live component at three widths, with source.",
	meta: "@sushindustries/ui",
};

export function Paragraph() {
	return (
		<p>
			Wrap any component in <Ref reference={showcase}>Showcase</Ref> to render
			it live.
		</p>
	);
}

What you should see

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 inline as a link, styled like code. Hovering or focusing it raises a card above the word with the reference's title, summary and meta line - the card disappears the moment focus or the pointer leaves. Clicking the word itself follows reference.href, same as any link.

If nothing happens

The hover card needs no JavaScript to show, so if hovering does nothing the usual cause is the reference itself: Ref renders exactly whatever referenceReferenceAn inline mention that carries a hover card: title, summary and meta for the thing it names, raised by CSS alone.@sushindustries/ui · content object it's handed, nothing is looked up or fetched, so a stale or missing title/summary shows up as blank space in the card rather than as an error.