Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Product Maturity Map About Block for React

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 React with Base 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.

  • Pro

    Mission Pillars About

    Statements

    A mission held up by four pillars for a civic-software company: cells that share their hairlines, each with its numeral, a sentence, three initiatives with shipped and in-progress marks, and a progress bar counted from the list.

  • Pro

    Values Bento About

    Culture and values

    A bento of six values for a community-forum company: three tall cells that each carry a story of what the value looked like in a nested quote, and three one-line cells stacked beside them, in shared hairlines.

  • Pro

    Depth Table Integrations About

    Security and platform

    An integration depth table for a data-sync service: seven systems in plain type with direction, sync frequency, sign-in method and a state dot, in a framed, scrolling table.

  • Pro

    Repo Cards Open Source About

    Press and recognition

    Three repository cards for a developer toolkit, drawn like repo headers: owner and name, a description, a language letter, rolling star counts, forks, contributor initials and latest release, with a used-by line.

  • Pro

    Discipline Tabs Craft About

    Principles and process

    Tabs for four disciplines of a design-to-code tool: each panel lists three principles with a before and after sample and the figure that changed.

  • Pro

    Version Scrubber Product Evolution About

    Timelines

    A product's history as a version scrubber: a stepped slider from v1 to v6 grows a drawing of the app panel by panel while two notes say what changed and who it helped.

All 150 about blocks