Priority Budget
Share a fixed budget of points between items. Free, MIT · Work and teams › Canvases, selection and budgets
Several items share one limited budget: character points, hours of a week, shares of a plan. Every input path (the slider, the number field and its step buttons) goes through one calculation in whole steps, so the sum never drifts. A profile that cannot work is shown as an error, never silently repaired.
Installation
npx valyro-cli@latest add priority-budget
npx shadcn@latest add https://valyro.xyz/r/priority-budget.json
npm install valyro-ui
import 'valyro-ui/styles.css';
import { PriorityBudget } from 'valyro-ui';
Props
| Prop | Type | Default | |
|---|---|---|---|
items * | BudgetItem[] | The items sharing the budget, in display (and redistribution) order. | |
total * | number | The shared resource: points, hours, percent. | |
step | number | 1 | Smallest change, shared by every item; values, limits and the total are its multiples. Default 1. |
mode | 'pool' | 'redistribute' | 'pool' | pool (default): a change spends or returns the free remainder, the other items stay. redistribute: the sum is always total, the other unlocked items pay for a change evenly, leftover steps in item order. |
value | Record<string, number> | Values by item id. The accepted values are shown; a change is only requested through onValueChange. | |
defaultValue | Record<string, number> | Starting profile when uncontrolled; also what Reset returns to. | |
onValueChange | (value: Record<string, number>, detail: BudgetChangeDetail) => void | Called with the new value when it changes. | |
lockedIds | string[] | Ids of locked items: redistribution never moves them, and they cannot be changed. | |
defaultLockedIds | string[] | [] | Initial lockedIds when uncontrolled. |
onLockedIdsChange | (ids: string[]) => void | Called with the new lockedIds when it changes. | |
formatValue | (value: number) => string | Formats a value for display. Default: the number with the step's decimals. | |
disabled | boolean | false | Turns every control off. |
labels | Partial<PriorityBudgetLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Sticker Board — A free composition of photos, stickers and notes to move and rotate
- Lasso Select — Drag a rectangle to select a group of cards
- Calendar View — Event calendar
- Scheduler — Scheduler: day, week, month and resource timeline, drag and drop, recurrence
- Kanban Board — Task board
- Gantt Chart — Gantt charts with dependencies and drag to reschedule
- Booking Slots — Meeting booking: calendar, slots in the guest’s time zone, form and confirmation
- CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
- Approval Flow — Multi-stage approvals: sequential and parallel stages, decisions with reasons, history
- Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
- Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration
- Course Path Navigator — Course map: modules, locks, progress and skills, a list on narrow screens
Previous: Lasso Select · Next: Two Factor Setup · All Work and teams