Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Browser Compatibility Dashboard Block for React Aria

A matrix of twelve web features by Chrome, Firefox, Safari and Edge, four selects for the oldest version you support, cells that read Supported, Needs fallback, Partial or Unsupported, and a ready-to-ship count that recomputes.

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

Decide which web features you can ship, with this browser compatibility matrix for React with React Aria. A hairline frame with a plus mark on each corner opens with a toolbar band of four Native Selects, one for each browser (Chrome, Firefox, Safari and Edge, each with a two-letter tile and its name in text): the oldest version you still support. Under it, a table lists twelve Quirkmap features, such as container queries, subgrid and WebGPU, against the four browsers. Each cell is worked out from the version that first supports the feature and reads Supported, Needs fallback, Partial or Unsupported, with a glyph and the version, never a colour alone. A feature is ready to ship when all four cells are Supported, and the foot's "Ready to ship: 8 of 12" recomputes with every select. It's built from Native Select and Guides. For front-end plans and browserslist reviews.

FAQ

How do I fill it with my features?

Edit FEATURES: each has a name and four cells, one per browser in BROWSERS order, made with cell(full, partial). full is the first version with full support (0 for none yet) and partial the first with limited support. BROWSERS holds the versions offered in each select and START_TARGETS the versions chosen on load.

What do the four words mean?

Supported means the feature is in full at your oldest version. Partial means only a limited form is: the cell says from which version. Needs fallback means it arrives in a later version than your oldest, so older visitors need a fallback. Unsupported means no release has it yet.

When is a feature ready to ship?

When all four cells are Supported. The feature's row says "Ready to ship" or names the browsers that need work, and the foot counts the ready features and how many need a fallback or a later minimum.

Where do the versions come from?

They are typed from public compatibility tables as of October 2026 and may be out of date by the time you read this. Nothing is looked up here. Check each feature against a current source such as MDN's browser compatibility data or Can I use before you rely on it.

What stays local, and how do I wire it for real?

Everything: the matrix is typed and the selects only change what the page shows. To make it real, generate FEATURES from a compatibility dataset, and read the starting versions from your browserslist configuration.

How does it look on a phone?

The selects wrap onto several lines, and the matrix keeps the feature and all four browsers in a named region that scrolls sideways, so each cell stays readable.

All 200 dashboard blocks