Skip to content

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

Free

Compatibility Table for Svelte

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.

UI library: Ark UI

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. Ark UI in Svelte does not know browser support.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<div class="w-full max-w-4xl rounded-md border bg-background"><Table><TableHeader><TableRow><TableHead class="w-[180px]">CSS Feature</TableHead><TableHead class="text-center">Chrome</TableHead><TableHead class="text-center">Firefox</TableHead><TableHead class="text-center">Safari</TableHead><TableHead class="text-center">Edge</TableHead><TableHead class="text-center">Chrome Android</TableHead><TableHead class="text-center">Safari iOS</TableHead></TableRow></TableHeader><TableBody>{#each features as feature (feature.feature)}<TableRow><TableCell class="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} /></TableCell><TableCell><SupportIcon supported={feature.safariIos} /></TableCell></TableRow>{/each}</TableBody></Table></div>

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