Feature support table

Overview

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 browserFeatures array at the top of the file
• 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

Dependencies

npm install motion lucide-react
npx shadcn@latest add table