shadcn.io is not affiliated with official shadcn/ui
Risk Assessment Dashboard Block for Vue
A risk register on a 3 by 3 probability and impact matrix with numbered dots, cells tinted by score, a register sorted by score, and a select per row that changes the impact and moves the dot.
Installation
Overview
Rank what could go wrong and see where it sits with this risk register for Vue with Ark UI. Inside a hairline frame with a plus mark on each corner, a 3 by 3 matrix crosses probability with impact (Low, Medium and High), and each of nine Hazardline risks is a numbered dot in its cell. A cell's tint is its score, probability times impact from 1 to 9, drawn as a solid mix of the foreground colour instead of red or amber. Pressing a cell filters the register under it to that cell. The register lists the risks by score with the owner's initials and the mitigation as a word (Planned, In progress or Active), and every row has a Native Select for its impact: changing it moves the dot, recomputes the score and re-sorts the rows, and the register follows the risk into its new cell. It's built from Native Select, Empty and Guides. For risk committees and operations reviews.
FAQ
How do I fill it with my risks?
Edit RISKS: an id (the number in the dot), a title, a probability and an impact from 1 to 3, an owner and a mitigation. The score, the tint of each cell, the order of the register and the header sentence are worked out from those.
How is the score worked out?
It is the probability times the impact, so it runs from 1 to 9 and the matrix has six distinct values: 1, 2, 3, 4, 6 and 9. Ties in the register keep the risks' own numbers in order. The score also appears on each cell, and every cell has an accessible name that gives its probability, impact, score and the risks in it.
What does pressing a cell do?
It shows only that cell's risks in the register and says how many are shown. Pressing the cell again, or another one, changes or clears it. A cell with no risks shows a short message, and the register keeps its height in every case so nothing below it moves.
What stays local, and how do I wire it for real?
Everything: the risks are typed and an impact change lives in the page until it reloads. To make it real, load the register from your risk system, save a changed impact with the person and date who changed it, and keep a history so the score's movement can be audited.