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

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

const packages = [
	{ name: "ui", tone: "layout", summary: "The components the site is made of." },
	{ name: "atoms", tone: "content", summary: "Design tokens and atomic CSS." },
	{ name: "db", tone: "docs", summary: "Drizzle schema and client." },
] as const;

export function PackageList() {
	return (
		<ul className="flex flex-col gap-1">
			{packages.map((pkg) => (
				<li key={pkg.name}>
					<Item
						title={pkg.name}
						description={pkg.summary}
						icon="package"
						tone={pkg.tone}
						href={`/packages/${pkg.name}`}
					/>
				</li>
			))}
		</ul>
	);
}

tsx