shadcn.io is not affiliated with official shadcn/ui
Product Manager RICE Ranking Profile Block for Vue
A product manager profile as a RICE ranking: eight backlog items with reach, an impact menu, a confidence slider and effort in person-months, a live score and rank, and a Sort by score button so rows never move under the pointer.
Installation
Overview
Rank a backlog by what it is worth, with this product manager profile for Vue with Ark UI. A compact header names the planning tool and holds Sort by score, and the frame under it opens on the person: initials, name, role and place. The backlog is a native table of eight items, scrolling sideways on a phone with the item names held in place. Each row has its reach, an impact menu from 0.25 to 3, a confidence Slider from 50 to 100 percent and effort in whole person-months in a Number Input. The score (reach times impact times confidence over effort) and the rank update at once, but the rows keep their place until Sort by score is pressed, so nothing moves under the pointer. A line above the table says whether the rows are in score order. It's built from Table, Native Select, Slider, Number Input, Button, Badge, Avatar and Guides, with a CSS entrance only. The items and figures are invented. For a planning tool, a roadmap review or a prioritisation exercise.
FAQ
How do I use my own backlog?
Edit START. An item has an id, a title, the reach (people in a quarter), an impact from the menu as a string, a confidence between 50 and 100 and the effort in person-months. The score is the rounded product of reach, impact and confidence over effort, and the rank is its place when the items are ordered by score, with equal scores keeping their starting order. Nothing is typed twice.
Why do the rows not move by themselves?
A row that jumps while you drag its slider is hard to follow and hard to hit. So the rank changes at once and the row stays; Sort by score puts the rows in order when you ask, and the line above the table says which state they are in. Reset inputs puts every value and the order back to the start.
What does the effort field accept?
Whole numbers from 1 to 24. Typed digits in any script are read as numbers, anything outside the range is held to it in the score, and the buttons step by one. On React Aria the value commits when you leave the field or press Enter, not on every key; on the other bases it follows each keystroke.
Is anything saved?
No. The values live in the page and are lost on reload, and Sort by score only reorders the rows you see. To make it real, post each change to your planning store and sort on the server. The figures are invented and are not advice.
How does the table behave on a phone?
It is wider than the screen on purpose: the table scrolls sideways inside a labelled region you can reach with the keyboard, while the item names stay at the start so every row is still named. Each control keeps a label that includes the item, such as Impact for Calendar sync.