Zum Inhalt springen
UI Kit
Accent

Bäckerei Website Sections

Für Bäckereien, Konditoreien und Cafés mit eigenem Ofen. Die Theke mit gezeichnetem Brot und Allergenen, der Ofenplan des Tages, Vorbestellung zum Abholen und Filialen auf einer gezeichneten Stadtkarte.

4 Variants
Kategorie wechseln

Frisch aus dem Ofen, bereit zum Abholen

Eine Bäckerei-Website lebt davon, was gerade frisch ist. Diese Sections zeigen Theke, Ofenplan des Tages und die nächste Filiale und lassen Kunden ihr Brot reservieren, solange es noch da ist. Brot, Ofen und Stadtplan sind im Kit gezeichnet, die Seite steht also schon vor dem ersten Fotoshooting.

„Sortiment“ ordnet die Theke nach Kategorien auf Chips, jedes Teil ist gezeichnet, mit Ofenzeiten als kleine Marken und Allergenen in klaren Worten. „Backzeiten“ zeigt den Ofenplan des Tages mit einer Bahn je Sorte, einer roten Linie für die aktuelle Uhrzeit und dem nächsten Blech groß mit den Minuten bis dahin. „Vorbestellen“ füllt eine Tüte mit Plus und Minus, wählt Filiale, Tag und Uhrzeit und hält die Summe im Blick. „Filialen“ zeichnet einen Stadtplan mit Pins, die gewählte Filiale zeigt, ob sie geöffnet hat, die Woche und ihre Café-Plätze.

Nenn Allergene in klaren Worten, Kunden fragen an der Theke ohnehin danach. Zeig Backzeiten für die Sorten, die zuerst weg sind. Die Vorbestellung lohnt sich besonders an Wochenenden und Feiertagen, wenn die Schlange am längsten ist.

Bäckerei

SortimentNeu in 1.2

Die Theke nach Kategorie auf Chips. Jedes Stück ist gezeichnet und hebt sich mit etwas Dampf beim Zeigen, Ofenzeiten als kleine Marken und die Allergene in klaren Worten.

BackzeitenNeu in 1.2

Der Ofenplan des Tages, eine Spur je Sorte und eine Flamme je Blech, sie springen beim Scrollen herein. Eine rote Linie zeigt die Uhrzeit des Besuchers, das nächste Blech pulsiert und steht groß daneben, mit den Minuten bis dahin.

VorbestellenNeu in 1.2

Eine Tüte mit Plus und Minus füllen, die Zahlen springen, die Liste wächst daneben. Filiale, Tag und Uhrzeit wählen, die Summe gleitet mit, die Bestellung liegt an der Theke bereit.

FilialenNeu in 1.2

Eine gezeichnete Stadtkarte, deren Straßen sich beim Scrollen zeichnen, dann fallen die Pins herein. Eine Filiale wählen, sie pulsiert auf der Karte und zeigt, ob gerade geöffnet ist, die Woche mit dem heutigen Tag, Café-Plätze und einen Anruf-Knopf.

Details

Was Bäckerei mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
4
Version
1.0.0 · seit 1.2.0
Datei
components/ui/bakery.tsx
Bringt mit
utilskitbuttoniconsectionmotion
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 37 eigene Texte
Studio
Im Code anpassen

Props

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

  • variantoptional
    BakeryVariant

    assortmentbaking-timespreorderbranches

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • itemsoptional
    BakeItem[]

    assortment, baking-times, preorder

  • categoriesoptional
    { id: string; label: string }[]

    assortment: category tabs

  • dayStartoptional
    string

    baking-times: day starts and ends, "HH:MM"

  • dayEndoptional
    string
  • branchesoptional
    BakeBranch[]

    preorder, branches

  • pickupDaysoptional
    { id: string; label: string }[]

    preorder

  • pickupTimesoptional
    string[]
  • currencyoptional
    string

Eingebaute Texte

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

Alle 37 Texte anzeigen
categoryEnglisch CategoryDeutsch Kategorie
freshEnglisch Fresh atDeutsch Frisch um
allergensEnglisch ContainsDeutsch Enthält
glutenEnglisch glutenDeutsch Gluten
milkEnglisch milkDeutsch Milch
eggEnglisch eggDeutsch Ei
nutsEnglisch nutsDeutsch Nüsse
sesameEnglisch sesameDeutsch Sesam
todayEnglisch Out of the oven todayDeutsch Heute frisch aus dem Ofen
nowEnglisch NowDeutsch Jetzt
nextEnglisch Next from the ovenDeutsch Als Nächstes aus dem Ofen
inMinEnglisch in {n} minDeutsch in {n} Min.
doneEnglisch All baked for today, see you tomorrow from {time}.Deutsch Für heute ist alles gebacken, morgen ab {time} wieder.
addEnglisch Add one {name}Deutsch Ein Stück {name} dazu
removeEnglisch Remove one {name}Deutsch Ein Stück {name} weniger
basketEnglisch Your orderDeutsch Deine Bestellung
emptyEnglisch Add something from the counterDeutsch Leg etwas aus der Theke dazu
pickupEnglisch Pick up fromDeutsch Abholfiliale
dayEnglisch DayDeutsch Tag
timeEnglisch TimeDeutsch Uhrzeit
totalEnglisch TotalDeutsch Gesamt
orderEnglisch Order for pick upDeutsch Zum Abholen bestellen
orderedEnglisch Ordered. Your bag is ready at the counter.Deutsch Bestellt. Deine Tüte liegt an der Theke bereit.
payNoteEnglisch You pay when you pick it up.Deutsch Du bezahlst bei der Abholung.
itemsEnglisch {n} itemsDeutsch {n} Teile
branchesEnglisch BranchesDeutsch Filialen
openNowEnglisch Open nowDeutsch Jetzt geöffnet
closedNowEnglisch Closed nowDeutsch Gerade geschlossen
opensAtEnglisch Opens at {time}Deutsch Öffnet um {time} Uhr
opensDayAtEnglisch Opens {day} at {time}Deutsch Öffnet {day} um {time} Uhr
closesAtEnglisch Until {time}Deutsch Bis {time} Uhr
hoursEnglisch Opening hoursDeutsch Öffnungszeiten
closedEnglisch ClosedDeutsch Geschlossen
seatsEnglisch {n} seats in the caféDeutsch {n} Plätze im Café
callEnglisch Call {name}Deutsch {name} anrufen
routeEnglisch Plan a routeDeutsch Route planen
daysEnglisch Mon,Tue,Wed,Thu,Fri,Sat,SunDeutsch Mo,Di,Mi,Do,Fr,Sa,So

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Bäckerei reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen radio, radiogroup und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • 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

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 4 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Bäckerei?

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

Welche Varianten hat Bäckerei?

4 Varianten, Sortiment, Backzeiten, Vorbestellen und Filialen. Du wählst sie mit der Prop variant, zum Beispiel variant="baking-times".

Kann ich die Texte von Bäckerei übersetzen?

Ja. Bäckerei bringt 37 eigene Texte auf Deutsch und Englisch mit, etwa „Kategorie“, „Frisch um“ und „Enthält“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Bäckerei einbauen?

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

Oft gesucht

Direkt zu

In die Zwischenablage kopiert