Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Quadrant Plot Two Axis Map Features Block for Solid

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.

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

A quadrant-plot features section for Solid with Ark 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.

How does it work on a phone?

The plot stays square and fills the width, and each dot has a 44 pixel touch target around its small mark. The panel sits under the plot with a hairline between them.

Does the plot mirror in right-to-left languages?

No: a plot keeps its axes, so the figure is dir="ltr". The panel and the header follow the page's direction.

All 170 features blocks