Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Nutritionist Plan Builder Profile Block for React

A nutritionist's example plan builder: a plan control and a calorie slider that work out the macro split in grams and percent, drawn as a three-part bar, then four meals that take their share of the calories.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let a visitor try a day of eating, with this nutritionist plan builder profile for React with Base UI. A compact header says it is an example and nothing is prescribed, and the hairline frame under it opens on the nutritionist, labelled as a sample profile. A band holds two controls: a Segment Group for the plan (Balanced, High-protein or Plant-forward) with that plan's dietary tags under it, and a Slider for the day's calories from 1,400 to 2,600. The macro split is worked out from both: grams of protein, carbohydrate and fat, and percentages shared by largest remainder so they always add up to 100, drawn as a three-part bar and spelled out line by line in a Data List. Four meal slots take their share of the calories, each with an example dish, and their calories add up to the day. The foot, ruled by Guides, holds a status line. It's built from Segment Group, Slider, Data List, Badge, Avatar and Guides, with a CSS entrance only. For a nutrition practice, a health coach's page or any profile that shows a plan.

FAQ

How do I fill it with my own plans?

Edit PLANS. Each has an id, a name, a split of the calories between protein, carbohydrate and fat, four example dishes in the order of MEALS, and its dietary tags. MEALS lists the slots with their share of the day, and MIN_KCAL, MAX_KCAL and STEP_KCAL set the slider. The grams, the percentages and each meal's calories are worked out from them.

How is the split worked out?

Protein and carbohydrate are four calories a gram and fat nine, so each macro's grams come from its share of the day's calories. The percentages are then shared out from those grams by the largest-remainder method, so they always add up to 100, and the meal calories are rounded the same way so the four slots add up to the day.

Is this nutrition advice?

No. It is a labelled sample: the person, the plans and the dishes are invented, nothing here prescribes or diagnoses, and the header and the status line say so. Replace it with your own content and keep a line like that if you show real plans.

What stays in the page, and how do I make it real?

Everything. The choices only change what is shown, and nothing is saved or sent. To make it real, store the chosen plan and calories with your own API and read them back into the two controls.

How does it look on a phone?

The two controls stack, the slider keeps its labelled ends and the macro lines and meals keep their order. The bar changes width, not height, so the panel keeps its size as you drag. Figures stay whole in a right-to-left layout.

All 100 profile blocks