Distribution Strip
A free stats component for exact supplied parts of one total.
Materials record / example 01
A batch, fully accounted for
Three named inputs share one declared 100 kg batch. Change the paper amount to reveal the exact unallocated balance.
- 01. Reclaimed paper
- 65 kg
- 02. Recycled fibre
- 25 kg
- 03. Printing ink
- 10 kg
Community programme / example 02
Time reserved for the neighbourhood
A separate programme report records 40 supplied hours. Ten hours remain open for future work.
- 01. Neighbourhood repair workshops
- 12 hours
- 02. Shared garden sessions
- 8 hours
- 03. Volunteer support
- 10 hours
- Unallocated
- 10 hours
Example allocations only. The remaining 10 hours are shown in the strip and the legend.
Customise
Code
<StatDistributionStrip label="Supplied material batch" total={100} unit=" kg" parts={[{ id: "paper", label: "Reclaimed paper", value: paper }, { id: "fibre", label: "Recycled fibre", value: 25 }, { id: "ink", label: "Printing ink", value: 10 }]} paper={65} />Distribution Strip is a free stats component for Next.js and React, styled with Tailwind. It shows how named supplied parts divide one declared total, with an exact readable legend beside a compact animated partition.
The server HTML contains the whole, every original reading and any exact unallocated balance. When data changes, the strip moves between distributions while the text immediately reflects the current supplied values.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/stat-distribution-stripUsage
import { StatDistributionStrip } from "@/components/stat-distribution-strip";
export function MaterialsRecord() {
return (
<StatDistributionStrip
label="Supplied material batch"
total={100}
unit=" kg"
parts={[
{ id: "paper", label: "Reclaimed paper", value: 65 },
{ id: "fibre", label: "Recycled fibre", value: 25 },
{ id: "ink", label: "Printing ink", value: 10 },
]}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Visible nonblank name for the whole being divided. |
| total | number | required | Authoritative finite whole greater than zero. Its original String(number) is shown. |
| parts | ReadonlyArray<{ id: string; label: string; value: number }> | required | Two to eight unique stable IDs, nonblank labels and finite nonnegative values. Original readings remain visible even when input is invalid. |
| unit | string | "" | Literal suffix for the total, parts and remainder. Include a leading space when needed, as in unit=" kg". |
| className | string | undefined | Additional classes merged onto the figure root. |
Customisation
Supply a declared total and ordered named parts. The figure uses semantic theme tokens by default; four scoped CSS variables retheme the track, ink, accent and transition duration. The original String(number) of each finite input is used for exact decimal addition, so 0.1 plus 0.2 exactly matches 0.3 under the displayed-decimal contract. A positive exact remainder appears as Unallocated. Overfull or invalid input keeps all supplied rows and shows an unavailable note without a partition.
<div className="materials-panel">
<StatDistributionStrip
label="Supplied programme time"
total={40}
unit=" hours"
parts={[
{ id: "workshops", label: "Repair workshops", value: 12 },
{ id: "garden", label: "Garden sessions", value: 8 },
{ id: "support", label: "Volunteer support", value: 10 },
]}
/>
</div>
/* On the containing panel */
.materials-panel {
--distribution-track: var(--muted);
--distribution-ink: var(--foreground);
--distribution-accent: var(--primary);
--distribution-duration: var(--dur-3, 600ms);
}Frequently asked questions
- Is Distribution Strip free for commercial use?
- Yes. Distribution Strip is MIT licensed and free to use in personal and commercial projects under the repository's Commons Clause terms.
- What remains available without JavaScript or with reduced motion?
- The server-rendered figure includes the total, every exact supplied part and any unallocated balance. The final partition is visible without JavaScript, in print, with reduced motion and in forced colours. Its decorative strip does not replace the text legend.
- How are decimals and changes to the part list handled?
- The component adds each finite String(number) as an exact decimal, so an overfull sum is not silently rounded into a valid strip. Changes to values with the same ordered IDs animate together. Inserting, removing or reordering IDs shows the new final partition immediately.