S-Curve

A planned-versus-actual cumulative progress chart with per-task history and schedule variance in days.

registry:ui Registry JSON
Delivery S-curve 4 days behind

Weighted planned completion against recorded progress.

Reported
46%
Planned by today
50%
Planned finish
Nov 19, 2026

Installation

pnpm dlx shadcn-svelte@latest add https://shadcn.cptckp.com/r/s-curve.json

The CLI copies the source into your project and installs every dependency listed below.

Usage

import { SCurve, type SCurveTask } from '$lib/components/ui/s-curve/index.js';
example.svelte
svelte
<script lang="ts">
	import { SCurve, type SCurveTask } from '$lib/components/ui/s-curve/index.js';

	const tasks: SCurveTask[] = [
		{
			end: new Date(2026, 7, 25),
			id: 'design',
			percentComplete: 100,
			readings: [
				{ date: new Date(2026, 7, 1), percent: 40 },
				{ date: new Date(2026, 7, 15), percent: 75 },
				{ date: new Date(2026, 8, 1), percent: 100 }
			],
			start: new Date(2026, 6, 15),
			weight: 20
		},
		{
			end: new Date(2026, 9, 10),
			id: 'procurement',
			percentComplete: 55,
			readings: [
				{ date: new Date(2026, 7, 15), percent: 10 },
				{ date: new Date(2026, 8, 1), percent: 35 },
				{ date: new Date(2026, 8, 15), percent: 55 }
			],
			start: new Date(2026, 7, 1),
			weight: 35
		},
		{
			end: new Date(2026, 10, 20),
			id: 'construction',
			percentComplete: 15,
			readings: [{ date: new Date(2026, 8, 15), percent: 15 }],
			start: new Date(2026, 8, 1),
			weight: 45
		}
	];

</script>

<SCurve
	asOf={new Date(2026, 8, 15)}
	{tasks}
	title="Delivery S-curve"
	description="Weighted planned completion against recorded progress."
/>

Files & dependencies

Installed asSource
s-curve/index.tssrc/lib/registry/ui/s-curve/index.ts
s-curve/s-curve-lib.tssrc/lib/registry/ui/s-curve/s-curve-lib.ts
s-curve/s-curve-types.tssrc/lib/registry/ui/s-curve/s-curve-types.ts
s-curve/s-curve.sveltesrc/lib/registry/ui/s-curve/s-curve.svelte

npm dependencies

  • @lucide/svelte@^1.28.0
  • layerchart@^2.2.0

Registry dependencies