Opal Comparison Matrix
A modern comparison table designed for EdTech and education platforms.
Features
- 4 plan tiers — Free Plan, Student Pro, Teacher Suite, Institution
- 8 comparison rows — Price, Storage, Courses, Live Sessions, AI Tutoring, Analytics, Support, API Access
- Plan summary cards — Top row with price and CTA button for each plan
- Most Popular highlight — Teacher Suite column highlighted with iridescent gradient
- Check/X icons — Boolean features shown with check and X icons
- Opalescent theme — Iridescent pink-to-blue-to-teal gradients on light background
- Sticky feature column — Feature names stay visible when scrolling horizontally
- Dark mode — Full dark variant with adjusted gradient opacities
- Responsive — Horizontal scroll on mobile with sticky first column
Usage
import RegistryItem from './registry-item';
export default function Page() {
return <RegistryItem />;
}
Customization
- Plans: Edit the
plans array to change names, prices, and popular flag
- Features: Edit
comparisonData to add/modify rows and values
- Gradients: Adjust the pink/blue/teal gradient stops for your brand colors
- Font: Uses Plus Jakarta Sans from Google Fonts; swap for any modern sans-serif
- Columns: Add or remove plan columns by updating both arrays
