Signed Contribution Bridge
A free logos and stats signed contribution bridge for ordered positive and negative totals in React.
Starting 500 kg · Final 515 kg
| Step | Change | Running total |
|---|---|---|
| Starting balance | — | 500 kg |
| New material | +40 kg | 540 kg |
| Reclaimed material | −25 kg | 515 kg |
| Final balance | — | 515 kg |
Customise
Code
const steps = [
{ id: "new", label: "New material", amount: 40 },
{ id: "reclaimed", label: "Reclaimed material", amount: -25 },
];
<StatSignedBridge
label="Material balance"
unit=" kg"
startingValue={500}
steps={steps}
/>Signed Contribution Bridge explains how an exact starting quantity changes through an ordered list of positive and negative contributions. It shows each prefix total, each signed change and the final result in text alongside a redundant visual bridge.
All values are safe integers and every step has a unique stable ID. Invalid data and overflow produce an unavailable state instead of partial totals.
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-signed-bridgeUsage
import { StatSignedBridge } from "@/components/stat-signed-bridge";
export function MaterialBalance() {
return <StatSignedBridge label="Material balance" unit=" kg" startingValue={500} steps={[{ id: "new", label: "New material", amount: 40 }, { id: "reclaimed", label: "Reclaimed material", amount: -25 }]} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Visible name for the ordered explanation. |
| unit | string | required | Literal unit appended to each exact value. |
| startingValue | number | required | Starting safe-integer quantity. |
| steps | SignedBridgeStep[] | required | Two to twelve uniquely identified signed safe-integer contributions in display order. |
| className | string | undefined | Additional classes merged onto the figure root. |
Customisation
The component uses semantic surface, text and border tokens. Change the supplied unit and ordered step records to explain another exact ledger:
<StatSignedBridge label="Material balance" unit=" kg" startingValue={500} steps={steps} />Frequently asked questions
- Is Signed Contribution Bridge free for commercial use?
- Yes. The component is MIT licensed and may be used in personal and commercial projects.
- Does reordering change the final result?
- The final sum stays the same when the contributions are unchanged, while each intermediate prefix total follows the supplied order.
- What values can I pass?
- The starting value and each of two to twelve contributions must be safe integers with unique non-empty step IDs. Overflow makes the bridge unavailable.