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

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

export function ComponentsPage() {
	return (
		<>
			<Section label="Packages" title="What's installable">
				<p>Every visible element on this site is a component in `ui`.</p>
			</Section>
			<Section
				id="conventions"
				label="Conventions"
				title="How a file gets placed"
			>
				<p>Kebab-case filenames, one component per file, flat.</p>
			</Section>
		</>
	);
}

tsx