Skip to content
Habitus Design

blocks / pricing

Pricing, two plans

Header and two plan cards; the featured plan flips to the dark scope (variables only, same markup).

React: PricingTwoPlans · Svelte: PricingTwoPlans · templ: blocks.PricingTwoPlans · Figma: 1:84 Pricing

Simple, transparent pricing

Start free. Upgrade when you're ready.

  • Free

    Perfect to get started

    $0

    • Track unlimited habits
    • Daily reminders
    • Streaks & basic analytics
    • Light & dark mode
    • No credit card required
    Start for Free

  • Premium

    Popular

    All features you need

    $4.99/month

    • Everything in Free
    • Advanced analytics
    • Habit templates & suggestions
    • Cloud backup & device sync
    • Premium themes and icons
    • Priority support
    Upgrade Now

Semantic classes (packages/adapter)

  • .ui-pricing-two-plans
  • .ui-pricing-two-plans-container
  • .ui-pricing-two-plans-lead
  • .ui-pricing-two-plans-plans
  • .ui-pricing-two-plans-plan
  • .ui-pricing-two-plans-plan-theme-default
  • .ui-pricing-two-plans-plan-theme-dark
  • .ui-pricing-two-plans-plan-name-row
  • .ui-pricing-two-plans-plan-name
  • .ui-pricing-two-plans-plan-description
  • .ui-pricing-two-plans-price
  • .ui-pricing-two-plans-price-value
  • .ui-pricing-two-plans-feature
  • .ui-pricing-two-plans-feature-check
  • .ui-pricing-two-plans-feature-lock
  • .ui-pricing-two-plans-plan-cta