Skip to content
UI Kit
Accent color

Recipes

Recipes with amounts that scale. The full recipe page, a shopping list to tick and copy, a cook mode with a timer per step, a collection with filters and the compact recipe box for a blog post.

5 variants
Switch category

Recipe

Recipe page

Picture, times and rating, ingredients that scale with the servings and tick off, steps that tick off. On phones a switch between ingredients and method.

Open in Studio

Shopping list

The ingredients on their own, scaled to the servings. Ticked items fill the bar, the list copies with one press.

Open in Studio

Cook mode

One step at a time in large type, the segments above show where you are. A step with a time gets its own timer, arrow keys move on.

Open in Studio

Collection

Recipes as cards with time, level and rating. Filters combine, fitting recipes glide to the front, the others fade behind them.

Open in Studio

Recipe box

The compact recipe for the end of a blog post. Rating, times, servings that scale, print and a jump to the full recipe, with a light that circles the box.

Open in Studio

Details

What Recipe brings along, read from the registry and the source.

Area
Content
Variants
5
Version
1.0.1 · since 1.1.0
File
components/ui/recipe.tsx
Brings along
utilskitbuttoniconrevealmotionsection
npm packages
None
Languages
English and German, 30 texts of its own
Studio
All 5 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The RecipeProps interface from components/ui/recipe.tsx, with the comments from the code.

  • variantoptional
    RecipeVariant

    fullingredientscook-modecollectioncard

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • recipeoptional
    RecipeData
  • recipesoptional
    RecipeData[]

    collection

  • filtersoptional
    string[]

    collection: filters, each a tag of the recipes

Built-in texts

Recipe writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 30 texts
prepEnglish PrepGerman Vorbereitung
cookEnglish CookGerman Kochen
totalEnglish TotalGerman Gesamt
servingsEnglish ServingsGerman Portionen
servesEnglish Serves {n}German Für {n} Personen
fewerEnglish Fewer servingsGerman Weniger Portionen
moreEnglish More servingsGerman Mehr Portionen
minEnglish {n} minGerman {n} Min.
hoursEnglish {h} h {m} minGerman {h} Std. {m} Min.
ingredientsEnglish IngredientsGerman Zutaten
stepsEnglish MethodGerman Zubereitung
stepEnglish Step {n}German Schritt {n}
stepOfEnglish Step {a} of {b}German Schritt {a} von {b}
nutritionEnglish Per servingGerman Pro Portion
copyEnglish Copy shopping listGerman Einkaufsliste kopieren
copiedEnglish List copiedGerman Liste kopiert
haveEnglish {a} of {b} readyGerman {a} von {b} bereit
timerEnglish Start timer, {n} minGerman Timer starten, {n} Min.
pauseEnglish Pause timerGerman Timer anhalten
resetEnglish Reset timerGerman Timer zurücksetzen
doneEnglish ReadyGerman Fertig
previousEnglish Previous stepGerman Vorheriger Schritt
nextEnglish Next stepGerman Nächster Schritt
finishEnglish Enjoy your mealGerman Guten Appetit
printEnglish Print recipeGerman Rezept drucken
jumpEnglish Jump to recipeGerman Zum Rezept
ratingEnglish {r} out of 5, {n} ratingsGerman {r} von 5, {n} Bewertungen
allEnglish AllGerman Alle
shownEnglish {n} recipesGerman {n} Rezepte
difficultyEnglish LevelGerman Schwierigkeit

Accessibility

Read from the source of the component.

  • Recipe handles the keys Enter, Arrow left, Arrow right and Space itself.
  • Sets aria-controls, aria-label, aria-labelledby, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
  • Uses the roles group, tab, tablist and timer.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • With reduced motion (prefers-reduced-motion) it stays still. 4 places in the code switch motion off then.

Frequent questions

How do I install Recipe?

With aiw add @ai-website/recipe. The command puts components/ui/recipe.tsx into your project, the code is yours from then on. It brings along button, icon, reveal, motion and section. It needs no further npm packages.

Which variants does Recipe have?

5 variants, Recipe page, Shopping list, Cook mode, Collection and Recipe box. You pick one with the variant prop, for example variant="ingredients".

Can I translate the texts of Recipe?

Yes. Recipe carries 30 texts of its own in English and German, such as “Prep”, “Cook” and “Total”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Recipe?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Recipe with aiw_components and install it with aiw_add @ai-website/recipe. Name the variant in your prompt, for example variant="full", and the assistant writes your content straight into the props.

Can I adjust Recipe without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching Recipe code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Recipes on a page.

Often searched

Jump to

Copied to the clipboard