credit - examples - Adam Jurek

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

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

const DEPENDENCIES = [
	{
		name: "TanStack Start",
		by: "Tanner Linsley and contributors",
		href: "https://tanstack.com/start",
		role: "The framework this site runs on",
	},
	{
		name: "Vite",
		by: "Evan You and contributors",
		href: "https://vitejs.dev",
		role: "The build behind it",
	},
];

export function BuiltWith() {
	return (
		<div className="card-grid">
			{DEPENDENCIES.map((dep) => (
				<Credit key={dep.href} {...dep} />
			))}
		</div>
	);
}

tsx

What this example is not

Not an exhaustive dependency list. A real "built with" page names every credited package this way, one card each - spreading an object is a convenience for the list, not a hint that the props are optional.