Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

AI Risk Assessment Changelog Block for Vue

A three-by-three risk matrix of likelihood against impact with six numbered factor dots, a keyboard-friendly list of the same factors, and a detail panel with each one's mitigation, files and confidence.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An AI risk assessment changelog for Vue with Ark UI, written for Riskcompass, a fictional release-risk tool. A split puts a three-by-three matrix of likelihood against impact first on a wide screen; six numbered dots are placed from each factor's typed levels, and each cell is tinted and labelled Low, Medium or High from likelihood times impact. Beside it a list of the same six factors and a detail panel give the chosen one's mitigation, the files it touches and how sure the model was. Choosing a factor, from its row or its dot, fills its number and rings its dot. It's built from Guides and native buttons, with CSS transitions for the entrance. For release notes that show the risk before the rollout. The factors and the confidences are example data.

FAQ

How do I use it with a keyboard or a screen reader?

The list is the keyboard route: each factor is a toggle button, and the detail panel is a polite live region that reads the new factor when you choose one. The dots in the matrix are for the pointer, so the drawing is hidden from assistive technology and every fact is also in the list and the panel.

How is a dot placed?

From two typed numbers on the factor, its likelihood and its impact, each from 1 to 3. Two factors in the same cell share it side by side. A cell's word and tint come from likelihood times impact: 1 and 2 are Low, 3 and 4 Medium, 6 and 9 High.

What does the confidence number mean?

It is how sure the model was about the factor, not the chance that it goes wrong. The panel says so in words and the number is example data.

Does the page jump when I choose a factor?

No. All six detail panels sit in one grid cell with the five not chosen unseen, so the tallest sets the height. The matrix does not move either: only a dot fills and gets a ring.

How does it fit a phone and a right-to-left layout?

On a phone the list and the panel come first and the matrix sits under them. The matrix keeps its left-to-right axes in a right-to-left page, because likelihood and impact are drawn as a chart, and the text around it follows the page.

All 200 changelog blocks