A production-ready browser compatibility table that visualises CSS feature support across 10 desktop and mobile browsers. Designed for developer tool landing pages, documentation sites, and technical marketing pages.
Features
Animated entry — table fades and slides in on mount via Framer Motion
Spring-staggered icons — each check/cross icon animates in with a spring delay based on its position
Row hover highlight — hovered row gets a subtle coral tint and the feature name shifts orange
Dot indicator — small dot beside each feature name changes from slate to coral on hover
Rotated browser names — vertical text labels for compact column headers
Human-readable feature names — kebab-case data is auto-formatted to Title Case with spaces
Themed icons — CheckIcon uses hero-matching coral (#ff9b85), XIcon uses red for unsupported
Responsive — horizontally scrollable on small screens
TypeScript — fully typed data and component
Components Used
Table, TableHeader, TableHead, TableRow, TableBody, TableCell — from @/components/ui/table (shadcn/ui)
motion — from motion/react (Framer Motion)
CheckIcon, XIcon, MonitorIcon, SmartphoneIcon — from lucide-react
useState — from react
Props / Customization
Add or remove rows in the array at the top of the file
browserFeatures
Feature names are auto-formatted — keep them as kebab-case in the data
Check icon color: stroke-[#ff9b85] — update to any hex value
Hover highlight color: rgba(255,155,133,0.05) — adjust opacity for intensity
Animation stagger: delay: 0.05 * index + rowIdx * 0.08 — tune timing to taste
