shadcn.io is not affiliated with official shadcn/ui
Nutrition Tracker Chat Block for Vue
A dietitian's thread with a Today band of four meters: pick a food and servings, and each add posts a food card and re-derives calories, protein, carbs and fat against typed goals, with Undo last.
Installation
Overview
Log what you eat and watch the day add up, with this nutrition tracker chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window for Forkwise, a food log: Idris Wendell is the dietitian, and a "Today" band under the top bar holds four meters (calories, protein, carbs and fat), each a Progress bar against a typed daily goal with what is "to go" or "over by". The composer has a food row above the message field: a Native Select of ten typed foods, a Number Input for servings and "Add", which posts a food card (the portion, the calories and three macros from the typed table times your servings) and re-derives the meters, plus "Undo last". The figures are labelled samples, not medical advice, and the Shine Button sends text to a short typed script. It's the starting point for a food diary, a diet coach or any log that adds up.
FAQ
What stays in the page, and how do I make it real?
Everything. The ten foods and their figures are a typed table in the file and are samples, not medical advice; the goals (1,800 kcal, 110 g protein, 220 g carbs, 60 g fat) are typed too; replies come from a short script. Nothing is stored or sent and no model runs. To wire it for real, look foods up in a nutrition database, store each entry where add runs and read the goals from the person's profile.
Where do the meter figures come from?
They are derived from the log each render: for every food card in the thread, the food's figure times its servings, summed per meter. Nothing is typed twice, so adding or undoing a food moves every meter at once. Past a goal the line reads "over by" and the bar stops at full.
What does Undo last remove?
The newest food card and its message, and nothing else; it is quiet when no food is logged. The status line says what was removed. Foods already in the sample day can be undone too.
Why a select instead of a search box?
With ten typed foods a native select is the fastest, most accessible control and works the same on every target. Swap in a combobox over your own food database when the list grows.
Is it usable with a keyboard and a screen reader?
Yes. The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden "Idris Wendell, 07:55" or "You, ...". Delivery is a glyph and a word, never a color. Every control is a real button, field or checkbox with a name, Enter sends and Shift and Enter add a line, and the avatars are hidden from assistive technology because names are always in text.