Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Table examples · Advanced

Compatibility Table for React

A browser support table with a check or a cross in each cell.

Framework
UI library

Five CSS features against six browsers. Each cell is a centered check in the success color or a cross in the destructive color, and each icon is labeled Supported or Not supported for screen readers. Icons scan faster than yes and no when the grid is wide; use the pattern for feature matrices, platform support and plan comparisons.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does a cell show supported or not?

SupportIcon takes a supported boolean. True renders CheckIcon in text-success. False renders XIcon in text-destructive. Both icons use size-4, so the colors follow your theme in light and dark mode.

How are the icons centered?

Each browser TableHead has text-center, and SupportIcon wraps the icon in flex justify-center. The feature name is a font-medium cell, and its header is w-[180px].

Where do the booleans come from?

Each object in features stores chrome, firefox, safari, edge, chromeAndroid and safariIos. The row passes those fields to SupportIcon, and feature.feature is the key.

Do the check and cross have a name?

Yes. Each icon has role="img" and an aria-label, Supported or Not supported, so a screen reader reads the status in each cell. The color is never the only signal: the check and the cross differ in shape too.

What happens when the seven columns do not fit?

The frame is max-w-4xl rounded-md border bg-background. Table scrolls sideways in its container, and the cells stay on one line with whitespace-nowrap.

How do I add another browser column?

Add a boolean on each object in features, a TableHead with text-center, and a TableCell that renders SupportIcon for that field.

All 8 table examples