Marble Pricing Toggle
An elegant pricing section designed for education and e-learning platforms.
Features
- 3-tier pricing — Student (Free), Professional ($29/mo), Institution ($99/mo)
- Billing toggle — Decorative monthly/annual toggle with Save 20% badge
- Feature lists — Check/X icons for each feature per tier
- Most Popular badge — Highlights the Professional tier
- Light marble palette — Clean whites with deep navy text and emerald accents
- Dark mode support — Full dark mode variant
- Responsive — Single column on mobile, 3-column grid on desktop
Dependencies
lucide-react — GraduationCap, BookOpen, Building, Check, X icons@/components/ui/card — Shadcn Card components@/components/ui/button — Shadcn Button@/components/ui/badge — Shadcn Badge@/components/ui/separator — Shadcn Separator
Customization
- Tiers: Edit the tiers array to change pricing, features, and descriptions
- Colors: Adjust emerald accent colors for your brand
- Toggle: Add state management to make the billing toggle functional
