Lavender Pricing Cards
A calming, trustworthy pricing section designed for healthcare and wellness SaaS platforms.
Features
- 3 pricing tiers — Clinic ($49/mo), Hospital ($149/mo), Enterprise (Custom)
- Billing toggle — Interactive monthly/annual switch with 20% savings badge
- Recommended tier — Hospital tier highlighted with accent border and badge
- Feature lists — Check/X icons for included/excluded features
- Comparison table — Detailed feature matrix with highlighted column
- Lavender palette — Soft purple (#c4b5fd, #7c3aed) with sage green (#6b8e6b) accents
- Dark mode — Full dark variant with adjusted lavender tones
- Responsive — Stacks to single column on mobile
Usage
import RegistryItem from './registry-item';
export default function Page() {
return <RegistryItem />;
}
Customization
- Tiers: Edit the
tiers array to change names, prices, features, and descriptions
- Toggle: The monthly/annual toggle uses React state for interactivity
- Comparison: Edit
comparisonRows to add or modify comparison features
- Colors: Adjust lavender and sage hex values for your brand
- Font: Uses DM Sans from Google Fonts; swap for any clean sans-serif
