shadcn.io is not affiliated with official shadcn/ui
Risk Assessment Kanban Block for Radix UI
A 5 by 5 risk register of twelve risks by likelihood and impact, with a score and a band word in each cell and a Mitigate button that lowers a risk's impact by one.
Installation
Overview
Keep an enterprise risk register where risks can be moved and mitigated with this 5 by 5 kanban for React with Radix UI. Likelihood runs down five rows, from Almost certain to Rare, and impact runs across five columns, from Negligible to Severe. Each of the twenty-five cells is a drop target holding risk chips, and its score is likelihood times impact with a band written as a word (Low, Medium, High or Critical) on a solid tint that deepens with the score, so the colour never carries the meaning. "Mitigate" on a risk lowers its impact by one cell and marks it with a Residual Badge; the sentence under the heading counts the critical, high, medium and low risks. A chip moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to". The frame is ruled by Guides. On a phone the grid scrolls in one named region with the impact axis kept at the top. For enterprise risk reviews, security registers and audits.
FAQ
How do I fill it with my own risks?
Edit LANES, IMPACTS and START. A risk has an id, a title, a residual of "" and a column such as l4i5 (likelihood 4, impact 5). The cells, their scores and their bands are built from the two lists, and the band thresholds are in bandOf.
What does Mitigate do?
It moves the risk one cell towards Negligible impact, keeping its likelihood, marks it Residual with the impact it had before, and the status line says both scores and the new band. A risk is mitigated once, and a risk already at the lowest impact has no button. Dragging it elsewhere is still possible, and Reset undoes it.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the risk's title. Space or Enter picks it up, the arrow keys move it (left and right change the impact column along the row, up and down change the likelihood row; they swap in right-to-left languages), Space drops it and Escape puts it back. Each step is announced in the status line in the foot.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists all twenty-five cells, named by likelihood and impact with the current one ticked, so one click moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch.
What stays in the demo?
Everything. The moves and the mitigations live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. The product, the people and the cards are made up. To keep a change, call your API from put, the one function every finished move goes through, and update the cards from the response.
How does it look on a phone?
The grid is wider than the screen, so it scrolls sideways and up and down inside one named region, and the impact labels stay stuck to its top. Touch drags from the grip only, so the rest of a chip still scrolls; the menu and the Mitigate button are the other ways to change a risk.