Onyx Comparison Table
A developer-focused comparison table designed for SaaS pricing pages and tool comparison landing pages.
Features
- 3 plan cards with pricing and CTA buttons
- 9-row feature comparison table
- Boolean features shown as check/X icons with accessible labels
- Text-based features (build time, storage, etc.) displayed inline
- Highlighted recommended column with emerald accent
- Dark mode native (onyx black + neon green)
- Responsive: cards stack on mobile, full table on desktop
Usage
import RegistryItem from './registry-item';
export default function Page() {
return <RegistryItem />;
}
Customization
- Modify the
plans and features arrays to match your product tiers
- Swap
recommended: true to highlight a different plan
- Adjust emerald/green accent to match your brand color
- Add more feature rows as needed
