Zum Inhalt springen
UI Kit
Accent

Rezepte

Rezepte mit Mengen, die mitrechnen. Die ganze Rezeptseite, eine Einkaufsliste zum Abhaken und Kopieren, ein Kochmodus mit Timer je Schritt, eine Sammlung mit Filtern und die kompakte Rezeptbox für einen Blogbeitrag.

5 Variants
Kategorie wechseln

Rezept

Rezeptseite

Bild, Zeiten und Bewertung, Zutaten, die mit den Portionen rechnen und sich abhaken lassen, Schritte zum Abhaken. Auf dem Telefon ein Umschalter zwischen Zutaten und Zubereitung.

Im Studio öffnen

Einkaufsliste

Die Zutaten allein, auf die Portionen gerechnet. Abgehakte füllen den Balken, die Liste kopiert sich mit einem Druck.

Im Studio öffnen

Kochmodus

Ein Schritt nach dem anderen in großer Schrift, die Segmente darüber zeigen, wo du bist. Ein Schritt mit Zeit bekommt einen eigenen Timer, Pfeiltasten gehen weiter.

Im Studio öffnen

Sammlung

Rezepte als Karten mit Zeit, Niveau und Bewertung. Filter lassen sich kombinieren, passende Rezepte gleiten nach vorn, die anderen treten zurück.

Im Studio öffnen

Rezeptbox

Das kompakte Rezept für das Ende eines Blogbeitrags. Bewertung, Zeiten, Portionen, die rechnen, Drucken und ein Sprung zum ganzen Rezept, mit einem Licht, das um die Box läuft.

Im Studio öffnen

Details

Was Rezept mitbringt, aus Registry und Quellcode gelesen.

Bereich
Content
Variants
5
Version
1.0.1 · seit 1.1.0
Datei
components/ui/recipe.tsx
Bringt mit
utilskitbuttoniconrevealmotionsection
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 30 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle RecipeProps aus components/ui/recipe.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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

Eingebaute Texte

Diese Texte schreibt Rezept selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 30 Texte anzeigen
prepEnglisch PrepDeutsch Vorbereitung
cookEnglisch CookDeutsch Kochen
totalEnglisch TotalDeutsch Gesamt
servingsEnglisch ServingsDeutsch Portionen
servesEnglisch Serves {n}Deutsch Für {n} Personen
fewerEnglisch Fewer servingsDeutsch Weniger Portionen
moreEnglisch More servingsDeutsch Mehr Portionen
minEnglisch {n} minDeutsch {n} Min.
hoursEnglisch {h} h {m} minDeutsch {h} Std. {m} Min.
ingredientsEnglisch IngredientsDeutsch Zutaten
stepsEnglisch MethodDeutsch Zubereitung
stepEnglisch Step {n}Deutsch Schritt {n}
stepOfEnglisch Step {a} of {b}Deutsch Schritt {a} von {b}
nutritionEnglisch Per servingDeutsch Pro Portion
copyEnglisch Copy shopping listDeutsch Einkaufsliste kopieren
copiedEnglisch List copiedDeutsch Liste kopiert
haveEnglisch {a} of {b} readyDeutsch {a} von {b} bereit
timerEnglisch Start timer, {n} minDeutsch Timer starten, {n} Min.
pauseEnglisch Pause timerDeutsch Timer anhalten
resetEnglisch Reset timerDeutsch Timer zurücksetzen
doneEnglisch ReadyDeutsch Fertig
previousEnglisch Previous stepDeutsch Vorheriger Schritt
nextEnglisch Next stepDeutsch Nächster Schritt
finishEnglisch Enjoy your mealDeutsch Guten Appetit
printEnglisch Print recipeDeutsch Rezept drucken
jumpEnglisch Jump to recipeDeutsch Zum Rezept
ratingEnglisch {r} out of 5, {n} ratingsDeutsch {r} von 5, {n} Bewertungen
allEnglisch AllDeutsch Alle
shownEnglisch {n} recipesDeutsch {n} Rezepte
difficultyEnglisch LevelDeutsch Schwierigkeit

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Rezept reagiert selbst auf die Tasten Enter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-controls, aria-label, aria-labelledby, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group, tab, tablist und timer.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 4 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Rezept?

Mit aiw add @ai-website/recipe. Der Befehl legt die Datei components/ui/recipe.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, reveal, motion und section. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Rezept?

5 Varianten, Rezeptseite, Einkaufsliste, Kochmodus, Sammlung und Rezeptbox. Du wählst sie mit der Prop variant, zum Beispiel variant="ingredients".

Kann ich die Texte von Rezept übersetzen?

Ja. Rezept bringt 30 eigene Texte auf Deutsch und Englisch mit, etwa „Vorbereitung“, „Kochen“ und „Gesamt“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Rezept einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Rezept mit aiw_components und installieren sie mit aiw_add @ai-website/recipe. Nenn im Prompt die Variante, etwa variant="full", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Rezept ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Recipe-Code zum Kopieren.

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Rezepte stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert