Loadout Slots

Assign compatible items to named slots, with budget and reasons. Free, MIT · Games › Cards, loadouts and crafting

Builds a set by putting items into named slots: hero equipment, a PC build, a bundle. One check of the whole proposed loadout (type, copies, budget, your rule) serves the Assign buttons, the keyboard and dragging alike; a refused change leaves the loadout as it was and says why in text. The summary follows the current loadout.

Installation

npx valyro-cli@latest add loadout-slots

npx shadcn@latest add https://valyro.xyz/r/loadout-slots.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { LoadoutSlots } from 'valyro-ui';

Props

Prop	Type	Default
`items` *	`LoadoutItem[]`		The catalog.
`slots` *	`LoadoutSlot[]`		The named slots, in display order.
`value`	`LoadoutValue`		Item id by slot id (null or missing: empty). Only proposed changes are reported; the value is never rewritten.
`defaultValue`	`LoadoutValue`	`{}`	Initial `value` when uncontrolled.
`onValueChange`	`(value: LoadoutValue, change: LoadoutChange) => void`		Called with the new `value` when it changes.
`canEquip`	`(item: LoadoutItem, slot: LoadoutSlot, next: LoadoutValue) => LoadoutCheckResult`		Extra rule for every occupied slot of a proposed loadout: pure and synchronous. Default: the type check only.
`budget`	`number`		Spending limit in minor units. With it, an item of unknown price cannot be added.
`summarize`	`(value: LoadoutValue, items: LoadoutItem[]) => LoadoutSummaryRow[]`		Rows of the summary. Default: cost, budget left and required slots.
`replacement`	`'allow' \| 'confirm' \| 'deny'`	`'confirm'`	Placing into a taken slot: `allow`, `confirm` (default) or `deny`.
`formatPrice`	`(minor: number) => string`	`(minor) => (minor / 100).toFixed(2)`	Formats minor units for display. Default: two decimals.
`labels`	`Partial<LoadoutSlotsLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Card Hand — Pick several cards from a fanned hand, with a limit
Crafting Recipe — Recipe card: batches, ingredients needed and what is missing
Tier List — S+…D tier list: portraits with role badges, role filter, drag with mouse, touch or keyboard, export
Meta Table — Meta table: tier, win, pick and ban rates with patch-over-patch change, role and rank filters, virtualized
Matchup Matrix — Counterpicks: champion-vs-champion heat matrix with tooltips, pick your champion, a list on phones
Tournament Bracket — Tournament bracket: single and double elimination, series scores, winner, team path, monograms
Patch Notes — Patch notes: champions and items with ability icons, before → after, buffs, nerfs and changes, filters

Previous: Card Hand · Next: Crafting Recipe · All Games