Tier List
S+…D tier list: portraits with role badges, role filter, drag with mouse, touch or keyboard, export. Pro · Games › Meta and tier lists
Rank champions, heroes or items in tiers S+ to D on a colour scale. Portraits carry a role badge and a role filter narrows the list. View mode reads as a labelled list per tier; edit mode drags tiles between tiers with the mouse, a long press on touch, or the keyboard (Space to pick up, arrows to move, Space to drop), with every move announced. While dragging, a lifted copy follows the pointer, the target tier lights up and its tiles part to show where the tile lands. The result copies as text or downloads as JSON.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add tier-listnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { TierList } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
items * | TierItem[] | Everything that can be ranked. Items in no tier wait in the unranked row. | |
tiers | TierDef[] | DEFAULT_TIERS | Tiers from best to worst. Default S+, S, A, B, C, D. |
roles | GameRole[] | Roles of the items: badges on the portraits and, with two or more, a role filter. | |
value | TierPlacement | Tier id → item ids in order. | |
defaultValue | TierPlacement | {} | Initial placement when uncontrolled. Default: everything unranked. |
onValueChange | (value: TierPlacement) => void | Called with the new placement after every drop. | |
roleFilter | string | Role id the list is narrowed to; '' shows every role. | |
defaultRoleFilter | string | '' | Initial role filter when uncontrolled. Default '' (every role). |
onRoleFilterChange | (role: string) => void | Called when the reader picks a role. | |
mode | 'view' | 'edit' | view reads the list; edit drags items between tiers and shows the unranked row. | |
defaultMode | 'view' | 'edit' | 'view' | Initial mode when uncontrolled. Default view. |
onModeChange | (mode: TierListMode) => void | Called when the reader switches the mode. | |
editable | boolean | true | Shows the view / edit switch. Default true; false keeps the list read-only unless mode is edit. |
exportable | boolean | true | Shows the copy-as-text and download buttons. Default true. |
exportName | string | 'tier-list' | File name of the JSON download, without the extension. Default tier-list. |
size | 'sm' | 'md' | 'lg' | 'md' | Portraits of 40, 52 or 64 px. Default md. |
showNames | boolean | true | Names under the portraits. Default true; without them the name is in the tooltip and read aloud. |
renderItem | (item: TierItem, mode: TierListMode) => ReactNode | Custom tile content, e.g. a portrait with a hover card. Default: portrait, role badge and name. | |
onItemClick | (item: TierItem) => void | Makes tiles buttons in view mode. | |
title | ReactNode | Heading. Default: labels.title. | |
caption | ReactNode | Line under the heading: patch, rank, sample. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading (default 3). |
labels | Partial<TierListLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- 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: Media Player · Next: Meta Table · All Games