shadcn.io is not affiliated with official shadcn/ui
Recipe Generator AI Block for Ark UI
Find a recipe from what is in the pantry: tick ingredients, set dietary needs and servings, and the best of six typed recipes opens with scaled quantities, a you-have count, what is missing and steps to tick off.
Installation
Overview
Answer what can I cook tonight, with this recipe finder for React with Ark UI. A hairline frame with a plus mark on each corner holds the inputs: sixteen pantry chips you tick, an Input to add any other ingredient, four dietary chips, Vegetarian, Vegan, Gluten-free and Nut-free, and a servings stepper. The Shine Button, the only colored control, scores six typed recipes by a rule that is written in the file: the ingredients you have count, a recipe that clashes with a dietary chip is out, and ties go to the shorter prep. The winner opens below with its prep time, "You have 4 of 7" and "Missing: lemon, parsley" worked out from your ticks, an ingredient list whose quantities scale with the servings in real fractions, and steps; both lists can be ticked off, and a ticked line is struck. When nothing fits, an Empty state says so. Guides rule the bands. For meal planners, grocery apps and any tool that suggests from a short list.
FAQ
What stays in the page, and how do I make it real?
Everything. The six recipes are typed in RECIPES, the scoring is a few lines in rankOf, and ticks live in the tab. No model writes a recipe and nothing is sent. To make it real, load recipes from your own database in the same shape and keep rankOf, or replace it with a search.
How is the best recipe chosen?
Recipes that clash with a ticked dietary chip are dropped, and so are those that use fewer than two of your ingredients. Of the rest, the one that uses most of what you have wins, and a tie goes to the shorter prep time. The result keeps the pantry it was found with, so changing a chip afterwards shows a note until you press Find a recipe again.
How are quantities scaled?
Every quantity is typed for two servings, in eighths of a unit. Changing the servings multiplies it, rounds to the nearest eighth and prints a whole number and a fraction glyph, for example 1 and a half. The stepper runs from 1 to 12.
What if I add an ingredient that is not in any recipe?
It joins the chips and is ticked, but a recipe only counts it if it names the same ingredient. Words are compared in lower case, so Garlic and garlic are the same.