Cedar Wellness Pricing
A clean, organic pricing block designed for fitness and wellness platforms.
Features
- 3-tier layout — Starter, Performance, and Elite plans with clear differentiation
- Billing toggle — Monthly/annual switch with savings badge using Shadcn Switch
- Featured tier — Middle card with scale emphasis, ring highlight, and floating badge
- Feature checklist — Check/X icons for included vs excluded features
- Teal/emerald palette — Fresh natural color scheme on warm stone background
- Responsive — Stacks on mobile, 3-column grid on desktop
- Dark mode — Full dark variant with adjusted gradients and borders
- Accessible — sr-only label on toggle, aria-label on feature lists
Dependencies
@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/button — Shadcn-Vue Button@/components/vue-ui/card — Shadcn-Vue Card family@/components/vue-ui/separator — Shadcn-Vue Separator@/components/vue-ui/switch — Shadcn-Vue Switchlucide-vue-next — Check, X, Zap, Crown, Dumbbell icons
Customization
- Plans: Edit tier objects to match your pricing structure
- Colors: Replace teal/emerald accents with your brand colors
- Features: Add or remove items from each tier's feature list
- CTA text: Customize button labels per tier
