Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Product Maturity Map About Block for Vue

A product maturity map for a no-code toolkit, with nine features in hairline cells labelled Stable, Beta or Labs, and a filter that dims the rest in place.

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 product-maturity map for Vue with Ark UI, written for Latchkit, a fictional toolkit for people who do not write the app. A compact header has a single-choice filter at its end (All, Stable, Beta, Labs) and a polite line that says how many features match. Nine features sit in hairline cells from rail to rail: a maturity badge, the name, one line, and a "Learn more" link. Choosing a maturity dims the others to a tint; they stay in place and stay linked, and the grid does not reflow. The cells end the block. On a small screen they are two across, and the last cell spans both so the row stays full. It's built from ToggleGroup, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For an about page that should say what is ready and what is still in the lab. The features and the labels are example data.

FAQ

How do I change the features?

Edit FEATURES at the top of the file. Each has a name, a line and a stage of stable, beta or labs. The filter's counts and the status line are computed from that array. The last feature is the one that spans both columns on a small screen.

What does the filter do?

It dims the features outside the chosen maturity: a solid tint and quieter body text, while the name, the badge and the link stay readable. Nothing is removed or moved, so the block keeps its height. The choice stays pressed, and All shows every feature. The status line announces the count.

How is it read by a screen reader?

The section has one h2. The status line is a polite live region, so a change of filter is announced as the whole counted phrase. The filter is a group named "Maturity", and each choice includes its count. Each feature is an h3, with its badge, its line and a link named "Learn more about" plus the feature.

How does the filter work with a keyboard?

Arrow keys move between All, Stable, Beta and Labs. The pressed choice is the filter, and pressing it again does not clear it. Tab moves on to the feature links, including the dimmed ones, which stay in the tab order.

How does it fit on a phone?

The filter wraps under the heading. The cells are two across, and the last cell spans the row so the hairlines have no empty cell. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the link's arrow turns around.

What moves, and what happens with reduced motion?

The heading fades up once when the page loads. The cells do not, so a filter never replays them. Dimming is a short colour change. With reduced motion the entrance is off and the tint changes at once.

All 150 about blocks