shadcn.io is not affiliated with official shadcn/ui
Recipe Sharing Chat Block for React
A family thread with a shared recipe card: a servings field that rescales every quantity with fractions, five steps to tick off with a progress bar, and a save toggle that moves the cookbook count.
Installation
Overview
Pass a recipe around the family and cook it for the right number of people, with this recipe sharing chat for React with Base UI. A hairline frame with a plus mark on each corner holds a narrow window for Kitchenkin, a recipe app for households: the top bar names Imelda Tarrant and carries a "Saved (3)" count, and under her message sits the recipe card, with a drawn bowl, the time and a Number Input for servings. Change the servings and every quantity is rescaled from the recipe written for four, with fractions kept (a quarter, a half, one and a third) and the units left alone; the five steps are Checkbox rows with a Progress bar that reads "2 of 5 steps done"; and a Toggle saves the recipe to the family cookbook. The composer's Shine Button sends what you type to a short typed script of replies. It's the starting point for a recipe app, a meal kit or any shared card you can adjust.
FAQ
What stays in the page, and how do I make it real?
Everything. The recipe, its quantities and steps are typed in the file, the replies come from a short script keyed on words such as "double" and "thanks", and saving only moves the count in the top bar. Nothing is sent or stored and no model runs, as the line under the composer says. To wire it for real, load the recipe from your API, write the ticks and the saved state back when they change, and send post's text to your messaging service where the code says so.
How are the quantities scaled?
One pure function multiplies each quantity by the servings you ask for and divides by the four it was written for, and a second turns the result into a cook's number: the nearest of an eighth, a quarter, a third, three eighths, a half and so on, with the whole number in front ("1¼"), and plain rounding from ten up. Units are kept as typed, and a servings value that isn't a whole number from 1 to 24 keeps the last good one.
How do the step checkboxes and the bar work?
Each step is a labelled checkbox; ticking it strikes the sentence through and the bar and the "2 of 5" count are derived from the ticked boxes, so they can't disagree. The bar is decorative: the count in words is what a screen reader hears.
What does Save to our cookbook do?
It is a toggle: pressed, it fills the bookmark, says "Saved to the cookbook, in this demo." in the status line and moves the top bar from "Saved (3)" to "Saved (4)". Pressing again undoes it. In your app, add or remove the recipe from the household's collection in the same handler.
Is it usable with a keyboard and a screen reader?
Yes. The log is a focusable region announced as a log, every message starts with a hidden "Imelda Tarrant, 18:03", the servings field is labelled and has minus and plus buttons, and the pressed state of the save toggle is exposed as a state, not only a fill. Enter sends and Shift and Enter add a line.