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.jsonThe 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 as | Source |
|---|---|
| s-curve/index.ts | src/lib/registry/ui/s-curve/index.ts |
| s-curve/s-curve-lib.ts | src/lib/registry/ui/s-curve/s-curve-lib.ts |
| s-curve/s-curve-types.ts | src/lib/registry/ui/s-curve/s-curve-types.ts |
| s-curve/s-curve.svelte | src/lib/registry/ui/s-curve/s-curve.svelte |
npm dependencies
- @lucide/svelte@^1.28.0
- layerchart@^2.2.0
Registry dependencies
- status-badge
- card
- chart
- empty
- select
- skeleton