Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Diet Journal Calendar Block for Radix UI

A week strip over four meal bands where you add typed foods, remove them, and watch the kcal left, the macro split bar and each day's total follow a target you type.

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

Keep a food log with this diet journal calendar for React with Radix UI. A hairline frame with a plus mark on each corner opens with a strip of seven day buttons, Monday 12 to Sunday 18 October, each showing its kcal and locking the days after the fixed "now", Wednesday 14. For the chosen day a figure gives "kcal left" against a daily target you type in the header, and a bar splits the day's protein, carbohydrate and fat into three foreground weights, the shares worked out by largest remainder so they always add to 100. A toolbar with two Selects, a food and a meal, and one button adds the food to that day; four bands (breakfast, lunch, dinner, snacks) list what was eaten with its kcal and macros, and a remove button takes an item back out and returns focus to its band. The target is a NumberInput. The bands are ruled by Guides. For nutrition apps, fitness coaches and any log that adds small things up through a day.

FAQ

How do I add foods?

Add to FOODS: each has a name, kcal and grams of protein, carbohydrate and fat for a portion. The kcal is typed beside the grams on purpose, as a label would print it. START lists the entries already logged by day and meal.

How is the macro split worked out?

The grams are turned into kcal (4 for protein and carbohydrate, 9 for fat), shared out as whole percentages by largest remainder, and drawn as three segments of the bar in foreground weights. A day with nothing logged shows an empty bar and zeros.

What if I type a bad target?

A target outside 1,200 to 4,000 kcal falls back to 1,800 and the page says so in its foot. "kcal left" turns into "kcal over" when the day passes the target. The page gives no advice about what a target should be.

How do I use it with the keyboard?

The days are a radio group with the arrow keys; locked days are skipped. The two selects and the add button are ordinary controls, every remove button names the food and the meal, and a polite status line reports each change with what is left.

What stays local, and how do I wire it up?

Entries reset on reload; nothing is saved or sent, and it is example data, not advice. To keep them, send each add and remove to your own API and start entries from what it returns.

How does it look on a phone?

The day strip keeps seven columns with one-letter weekdays, the two selects and the button wrap, and each meal band is a list of rows that never get narrower than their text.

All 100 calendar blocks