shadcn.io is not affiliated with official shadcn/ui
Tech Debt Tracker Changelog Block for React
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 React with Base 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.
Related
- Pro
Feature Request Board Changelog
Roadmap and customersAn idea board in a split: a Suggest a feature form beside status tabs with counts and a list of ideas with once-only upvote toggles and comment counts; a submitted idea joins the list locally.
- Pro
Kanban Status Changelog
Roadmap and customersA roadmap board for a team planning tool: three columns on shared hairlines, Planned, In progress and Shipped, each with its count and cards that carry an area, a title, a line and a vote button that moves the count by one and back.
- Pro
Roadmap Preview Changelog
Roadmap and customersA roadmap for a planning tool: an accordion of three themes whose rows count their items by stage and open to a list with a stage and a target quarter, beside a framed Now building card with a progress bar, owners and a target.
- Pro
Release Blockers Changelog
Deploys and rolloutsA verdict header counted from the data with a cleared bar, a toggle group (Open, Cleared, All) and an inset framed table of blockers with owners, states as shapes and words, and the day each was opened.
- Pro
Progress Tracker Changelog
Roadmap and customersA progress tracker for a project tool: four framed cells, two by two, each with a ring filled to the share of its tasks done, its name, a count like 7 of 12 tasks, a target quarter and a Remaining tasks row that opens to the list.
- Pro
Cost Optimization Changelog
Metrics and chartsNine cost savings grouped by category in one accordion: each row shows the category's dollars saved a month and a share bar, and opens to the wins and the release that shipped each.