---
title: "Nutrition Calculator — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Eneko Lekue · Interactive. Smart Nutritional Calculator."
canonical: "https://framer.elliotli.dev/component/nutritioncalculator"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Nutrition Calculator

# Nutrition Calculator

Smart Nutritional Calculator.

[View on Framer](https://framer.com/marketplace/components/nutritioncalculator/?via=elliot-li)

![Nutrition Calculator preview image 1](https://framer.elliotli.dev/og/component/nutritioncalculator/ab37db1dfbb98f99/1600x1200.jpg)

## Summary

Smart Nutritional Calculator.

## Description

## Nutritional Calculator: The Advanced Macro & TDEE Component for Framer

Are you building a website for a personal trainer, a nutritionist, or a health-tech startup? **Nutritional Calculator** is the ultimate plug-and-play component to provide instant, massive value to your users.

This isn't just a generic calorie counter. It is a clinical-grade nutrition engine powered by the Mifflin-St Jeor equation. It automatically calculates Basal Metabolic Rate (BMR), Total Daily Energy Expenditure (TDEE), and generates dynamic, safe macro distributions based on the user's biological data and goals.

### Key Features:

-   **Clinical-Grade & Safe Math:** Applies proportional, safe caloric deficits/surpluses (20% for fat loss, 10% for muscle gain) rather than dangerous flat numbers. It includes built-in medical caloric floors (1200 kcal for women / 1500 kcal for men) and automatic BMI health warnings to ensure safe recommendations.
    
-   **Detailed Premium Results:** Visually breaks down daily energy targets, macro splits (Protein, Carbs, Fat in grams and percentages), hydration goals (liters), and caloric breakdowns per meal.
    
-   **100% No-Code Customization:** Tailor every detail directly from the Framer properties panel. Change the primary accent, macro colors (perfect for modern health-tech pastel palettes), adjust typography sizes, modify padding, and choose from predefined professional box shadows.
    
-   **Editable Strategy Copywriting:** The "Strategy Insight" texts explaining the _why_ behind the numbers are fully editable. This allows creators and brands to insert their unique voice, tone, or specific coaching philosophy.
    
-   **Fully Responsive & Canvas Ready:** Looks stunning on mobile and desktop. It renders perfectly within the Framer Canvas, allowing designers to tweak the results panel without needing to switch to Preview mode.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #9274

## Details

- **Author**: Eneko Lekue
- **Price**: $12.00
- **Published**: 2026-05-12
- **Updated**: 2026-06-30
- **Added**: 2026-05-09
- **Categories**: Interactive

## More like this

-   [Retro TV Tilt Axis](/component/retro-tv-tilt-axis) — Zac Nielson · $9 — Immersive retro TV section
-   [Arkanoid Secret Game](/component/arkanoid-secret-game) — Dulaj Design · $8 — About Arkanoid Secret Game brings the classic, addictive arcade brick breaker experience directly into your Framer projects.
-   [Forma Object](/component/forma-object) — Reza Pahlevi · $19 — Rotate, compare & explore finishes
-   [Neon Sign Designer](/component/neon-sign-designer) — Luke Sn · $39 — Custom sign previews and estimates