Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Compatibility Table
A React table showing browser compatibility with CheckIcon and XIcon indicating supported and unsupported features using centered icons
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Feature support tables with yes-no text are boring—icons are faster to scan. This React compatibility table uses CheckIcon green and XIcon red. Built with shadcn/ui Table and Lucide React icons with centered alignment, the visual indicators show support at a glance—perfect for browser compatibility, feature comparison, platform support, API availability, device capabilities, or any table where binary yes-no status is clearer with color-coded icons than text and users need to quickly identify supported versus unsupported features.
| CSS Feature | Chrome | Firefox | Safari | Edge | Chrome Android | Safari iOS |
|---|---|---|---|---|---|---|
| CSS Grid | ||||||
| Flexbox | ||||||
| Container Queries | ||||||
| Subgrid | ||||||
| :has() Selector |
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Table
Text-based table
Table with Vertical Lines
Table with column borders
Status Badge
Status indicator badges
Dense Table
Compact table layout
Comparison Table
Product comparison table
Icon List
List with icon indicators