Bakery website sections

For bakeries, patisseries and cafés with their own oven. The counter with drawn bread and allergens, today’s oven plan, a pre-order to collect and branches on a drawn town map.

4 variants

Switch category

Fresh from the oven, ready to collect

A bakery website lives on what is fresh right now. These sections show the counter, the oven plan of the day and the nearest branch, and they let customers reserve their bread while it is still there. Bread, oven and town map are drawn in the kit, so the page is complete before the first photo shoot.

Assortment sorts the counter by category on chips, every item is drawn with oven times as small tags and the allergens in plain words. Baking times shows today's oven plan with one lane per item, a red line for the current time and the next batch large with the minutes to go. Pre-order fills a bag with plus and minus, picks branch, day and time and keeps the total in view. Branches draws a town map with pins, the chosen branch shows whether it is open, the week and its café seats.

Name allergens in plain words, customers ask for them at the counter anyway. Show baking times for the items that sell out first. Pre-order pays off most on weekends and holidays, when the queue is longest.

AssortmentNew in 1.2

The counter by category on chips. Each item is drawn and lifts with a little steam when you point at it, with oven times as small tags and the allergens in plain words.

Installv1.0.0

aiw add @ai-website/bakery

Brings along utils, kit, button, icon, section, motion

Usage

<Bakery variant="assortment" categories={[{ id: "bread", label }]} items={[{ id, category, shape: "loaf", tone, name, unit, price, text, allergens: ["gluten"], fresh: ["06:30"] }]} />

Source

Baking timesNew in 1.2

Today’s oven plan, one lane per item and a flame for each batch, they pop in while scrolling. A red line marks the visitor’s time, the next batch pulses and is shown large with the minutes to go.

Installv1.0.0

aiw add @ai-website/bakery

Brings along utils, kit, button, icon, section, motion

Usage

<Bakery variant="baking-times" dayStart="05:00" dayEnd="18:00" items={[{ id, name, shape, fresh: ["06:00", "11:30"] }]} />

Source

Pre-orderNew in 1.2

Fill a bag with plus and minus, counts pop and the order list grows on the side. Pick the branch, the day and a time, the total glides along and the order waits at the counter.

Installv1.0.0

aiw add @ai-website/bakery

Brings along utils, kit, button, icon, section, motion

Usage

<Bakery variant="preorder" items={[…]} branches={[{ id, name }]} pickupDays={[{ id, label }]} pickupTimes={["07:00", "08:00"]} />

Source

BranchesNew in 1.2

A drawn town map whose streets draw themselves while scrolling, then the pins drop in. Pick a branch, it pulses on the map and shows open now, the week with today marked, café seats and a call button.

Installv1.0.0

aiw add @ai-website/bakery

Brings along utils, kit, button, icon, section, motion

Usage

<Bakery variant="branches" branches={[{ id, name, address, x, y, seats, phone, hours: [["06:00", "18:30"], …, null] }]} />

Source

Details

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

Area: Industries
Variants: 4
Version: 1.0.0 · since 1.2.0
File: components/ui/bakery.tsx
Brings along: utilskitbutton iconsectionmotion
npm packages: None
Languages: English and German, 37 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The BakeryProps interface from components/ui/bakery.tsx, with the comments from the code.

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

Built-in texts

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

Show all 37 texts

Key	English	German
category	English Category	German Kategorie
fresh	English Fresh at	German Frisch um
allergens	English Contains	German Enthält
gluten	English gluten	German Gluten
milk	English milk	German Milch
egg	English egg	German Ei
nuts	English nuts	German Nüsse
sesame	English sesame	German Sesam
today	English Out of the oven today	German Heute frisch aus dem Ofen
now	English Now	German Jetzt
next	English Next from the oven	German Als Nächstes aus dem Ofen
inMin	English in {n} min	German in {n} Min.
done	English All baked for today, see you tomorrow from {time}.	German Für heute ist alles gebacken, morgen ab {time} wieder.
add	English Add one {name}	German Ein Stück {name} dazu
remove	English Remove one {name}	German Ein Stück {name} weniger
basket	English Your order	German Deine Bestellung
empty	English Add something from the counter	German Leg etwas aus der Theke dazu
pickup	English Pick up from	German Abholfiliale
day	English Day	German Tag
time	English Time	German Uhrzeit
total	English Total	German Gesamt
order	English Order for pick up	German Zum Abholen bestellen
ordered	English Ordered. Your bag is ready at the counter.	German Bestellt. Deine Tüte liegt an der Theke bereit.
payNote	English You pay when you pick it up.	German Du bezahlst bei der Abholung.
items	English {n} items	German {n} Teile
branches	English Branches	German Filialen
openNow	English Open now	German Jetzt geöffnet
closedNow	English Closed now	German Gerade geschlossen
opensAt	English Opens at {time}	German Öffnet um {time} Uhr
opensDayAt	English Opens {day} at {time}	German Öffnet {day} um {time} Uhr
closesAt	English Until {time}	German Bis {time} Uhr
hours	English Opening hours	German Öffnungszeiten
closed	English Closed	German Geschlossen
seats	English {n} seats in the café	German {n} Plätze im Café
call	English Call {name}	German {name} anrufen
route	English Plan a route	German Route planen
days	English Mon,Tue,Wed,Thu,Fri,Sat,Sun	German Mo,Di,Mi,Do,Fr,Sa,So

Read from the source of the component.

Bakery handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-label and aria-live, so screen readers announce purpose and state.
Uses the roles radio, radiogroup and status.
Announces changes through a live region without moving focus.
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

Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 4 places in the code switch motion off then.

Frequent questions

How do I install Bakery?

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

Which variants does Bakery have?

4 variants, Assortment, Baking times, Pre-order and Branches. You pick one with the variant prop, for example variant="baking-times".

Can I translate the texts of Bakery?

Yes. Bakery carries 37 texts of its own in English and German, such as “Category”, “Fresh at” and “Contains”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Bakery?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Bakery on a page.

Fresh from the oven, ready to collect

Bakery

AssortmentNew in 1.2

Baking timesNew in 1.2

Pre-orderNew in 1.2

BranchesNew in 1.2

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with