ValyroUI Русская версия

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

PropTypeDefault
items *BudgetItem[]The items sharing the budget, in display (and redistribution) order.
total *numberThe shared resource: points, hours, percent.
stepnumber1Smallest 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.
valueRecord<string, number>Values by item id. The accepted values are shown; a change is only requested through onValueChange.
defaultValueRecord<string, number>Starting profile when uncontrolled; also what Reset returns to.
onValueChange(value: Record<string, number>, detail: BudgetChangeDetail) => voidCalled with the new value when it changes.
lockedIdsstring[]Ids of locked items: redistribution never moves them, and they cannot be changed.
defaultLockedIdsstring[][]Initial lockedIds when uncontrolled.
onLockedIdsChange(ids: string[]) => voidCalled with the new lockedIds when it changes.
formatValue(value: number) => stringFormats a value for display. Default: the number with the step's decimals.
disabledbooleanfalseTurns every control off.
labelsPartial<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