Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Compatibility Table for React

A support table of CSS features against Chrome, Firefox, Safari, Edge, Chrome Android and Safari iOS, with a check or a cross in each cell.

A bordered table heads CSS Feature, then six browsers. Each cell is a check or a cross. CSS Grid is supported across the row. Safari iOS has no check for Container Queries.

Use checks and crosses for a support matrix. A Badge in the cell is clearer when the status needs a word, not just yes or no. Base UI in React does not know browser support.

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

Anatomy

Table anatomy: header, head, row, cell, footer, caption

Usage

<div className="w-full max-w-4xl rounded-md border bg-background">
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead className="w-[180px]">CSS Feature</TableHead>
        <TableHead className="text-center">Chrome</TableHead>
        <TableHead className="text-center">Firefox</TableHead>
        <TableHead className="text-center">Safari</TableHead>
        <TableHead className="text-center">Edge</TableHead>
        <TableHead className="text-center">Chrome Android</TableHead>
        <TableHead className="text-center">Safari iOS</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      {features.map((feature) => (
        <TableRow key={feature.feature}>
          <TableCell className="font-medium">{feature.feature}</TableCell>
          <TableCell>
            <SupportIcon supported={feature.chrome} />
          </TableCell>
          <TableCell>
            <SupportIcon supported={feature.firefox} />
          </TableCell>
          <TableCell>
            <SupportIcon supported={feature.safari} />
          </TableCell>
          <TableCell>
            <SupportIcon supported={feature.edge} />
          </TableCell>
          <TableCell>
            <SupportIcon supported={feature.chromeAndroid} />
{/* The rest of the file is under Installation. */}

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.

API Reference

Table

No extra props in this demo. The rest is on the Table page.

All 8 table examples