shadcn.io is not affiliated with official shadcn/ui
Quadrant Plot Two Axis Map Features Block for React
A hairline plot for a prioritisation tool: six backlog ideas as dots on impact against effort, one radio group, with a panel beside it reading out the chosen idea's scores and verdict.
Installation
Overview
A quadrant-plot features section for React with Base UI. A square plot in a framed figure puts effort across and impact up, with a cross through the middle and the four quadrants (Do first, Plan it, Fit in, Skip) named in its corners. Six backlog ideas sit on it as dots; picking one grows its dot, turns its quadrant's name bold and fills the panel beside the plot with its scores, its votes and a verdict. The panels share one grid cell, so the block never changes height, and below lg the panel drops under the plot. It's built from Badge, Data List and Guides, with CSS transitions for the dot and your theme's tokens for every colour. For prioritisation tools, roadmaps and any section where two measures place each item.
FAQ
How do I change the ideas and the axes?
Edit IDEAS at the top of the file: each has a name, a sentence, an effort and an impact from 1 to 9, its vote count and which side of the dot its name sits on. The dot's place and its verdict are worked out from those two numbers, with 5 as the middle of each axis. To plot other measures, rename the two axis captions and the four quadrant names in VERDICTS.
How do I use the plot with a keyboard?
The dots are one group of radio buttons: Tab puts focus on the chosen dot and the arrow keys move to the next or previous one in reading order (left to right by effort), choosing it as they go. A focus ring shows on the dot, and the panel beside the plot always shows the chosen idea.
What does a screen reader read?
Each dot is a radio button named by its idea, and its description points at that idea's panel, so it hears the scores, the votes and the verdict as soon as focus lands. The plot has a legend, and the panel is a real description list, so nothing is only in the drawing.
Why doesn't the panel change the block's height?
All six panels sit in one grid cell and the five not chosen are invisible, so the cell is as tall as the longest. Choosing a dot swaps which one shows and nothing below it moves.
Related
- Pro
Venn Diagram Overlap Features
Diagrams and mapsA three-circle Venn diagram for a segment builder: seven zones with head counts, one radio group, a caption that names the chosen zone with a link to create it, and three legend cells.
- Pro
Wave Graph Point Selector Features
Metrics and chartsA smooth retention curve for a cohort tool: six weekly points on one line, a value that floats on hover and a cell under the chart that reads out the chosen week.
- Pro
Radial Dial Wheel Selector Features
Diagrams and mapsA six-wedge dial for a model router: choose a skill and the needle turns to its wedge, the hub rolls to its score, and a list beside the dial shows all six with the model each goes to.
- Pro
Radar Chart Capability Trio Features
Metrics and chartsOne large radar of five axes with the previous release dashed and the latest run solid, three suite tabs that cross-fade the polygons, and a list of every axis score and how far it moved.
- Pro
Heatmap Density Grid Features
Metrics and chartsA 24 by 12 traffic density grid in a framed figure with a legend, three numbered callout cells, and the callouts described beside it, for a traffic observability tool.
- AABAABPro
Scorecard Letter Grade Grid Features
Metrics and chartsA site-audit report card: six areas in a hairline grid, each with a display letter grade, a sentence and five proficiency dots, and a foot band with the overall grade counted from the scores.