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

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

export function UploadCard({ percent }: { percent: number | undefined }) {
	return (
		<div className="card p-6">
			<h3 className="h4 m-0">report.pdf</h3>
			<div className="mt-4">
				<Progress label="Uploading" value={percent} />
			</div>
		</div>
	);
}

tsx