shadcn.io is not affiliated with official shadcn/ui
Tech Debt Tracker Changelog Block for Vue
Twelve debts placed on an effort and impact grid in a framed 2 x 2 with a toggle group that lights up one state, and a count of how many are paid down.
Installation
Overview
A debt tracker for Vue with Ark UI, written for Debtwise, a fictional engineering-health tool. A start-aligned header carries a title worked out from the data ("Five of twelve debts paid down by v3.5") and a toggle group (Open, In progress, Paid down, each with its count). Under it one framed 2 x 2 on shared hairlines that cross at a + mark: Quick wins, Big bets, Fill-ins and Avoid, each a list of chips with a glyph and a word for its state and the release that paid it down. Choosing a state dims every other chip. A progress bar at the foot says how many are paid down. It's built from Toggle Group, Progress and Guides, with your theme's tokens for every colour. For engineering updates and planning reviews. The debts are example data.
FAQ
How do I change the debts?
Edit DEBTS. Each has a title, an effort and an impact score from 1 to 4, a state and the release that paid it down. The quadrant is worked out from the scores (an effort of 2 or less is low, an impact of 3 or more is high), and the counts, the title and the progress bar are worked out from the states, so none of them is typed.
What does the toggle group do?
It lights up one state: the chips in that state keep full weight and every other chip turns quiet. Pressing the chosen item again clears the choice and shows all twelve at full weight. No chip moves or hides, so the grid never changes height, and a polite line says how many are highlighted.
How is a state shown without colour?
Each chip has a glyph and a word: a filled square and Paid down, a half-filled square and In progress, a ring and Open. The word is read by screen readers before the title, and a paid chip also carries the release in mono.