Move one allocation while the others make room. Lock values, preserve the total, and redistribute the remainder proportionally.
pnpm dlx shadcn@latest add @latheui/linked-allocationPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Linked Allocation is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| label* (required) | string | — | Visible legend for the allocation group. |
| value / defaultValue | AllocationItem[] | [] (defaultValue) | Controlled or initial items with unique id, label, nonnegative value and optional locked flag. |
| onValueChange | (items: AllocationItem[]) => void | — | Receives a new array after adjustment or lock changes. |
| total | number | 100 | Required sum of allocation values. Percentage allocations normally use 100. |
| disabled | boolean | false | Disable sliders and lock buttons. |
| className | string | — | Classes for the fieldset. |
Use the typed props to connect application state. The source is installed into your project.
"use client"
import { LinkedAllocation } from "@/components/ui/linked-allocation"
export default function AllocationDemo() {
return <div className="w-full max-w-md"><LinkedAllocation label="Make room for what matters" defaultValue={[{ id: "build", label: "Product", value: 45 }, { id: "research", label: "Research", value: 30 }, { id: "operations", label: "Operations", value: 25, locked: true }]} /></div>
}