Florist

For florists and flower shops. A bouquet builder with a drawn bouquet, bouquets by occasion, same day delivery with a postcode check, the greeting card and workshops.

5 variants

Switch category

Bouquet builder

Pick size, colours and extras. The drawn bouquet blooms anew flower by flower and sways gently, the price glides in a bar on the picture.

Open in Studio

Installv1.0.0

aiw add @ai-website/florist

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

Usage

<Florist variant="bouquet-builder" sizes={[{ id, label, price, stems }]} palettes={[{ id, label, flowers: ["#f4b8c5"], centre, leaves }]} extras={[{ id, label, price, icon }]} />

Source

By occasion

Occasions as round tabs. Matching bouquets rise in one after another and lift when you point at them, beside them a tip on what fits the occasion.

Open in Studio

Installv1.0.0

aiw add @ai-website/florist

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

Usage

<Florist variant="occasions" palettes={[…]} occasions={[{ id, label, icon, tip, bouquets: [{ name, price, palette, image }] }]} />

Source

Same day delivery

A ring counts down to the same day cut off. Pick the day and time, closed days are crossed out, and check your postcode against the delivery zones.

Open in Studio

Installv1.0.0

aiw add @ai-website/florist

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

Usage

<Florist variant="delivery" cutoff="14:00" closedDays={[0]} zones={[{ prefixes: ["791"], label, fee: 0, sameDay: true }]} />

Source

Greeting card

Choose a card, write or tap an idea. The card shows its front with a blooming bouquet or the inside with your words, a bar fills with the characters.

Open in Studio

Installv1.0.0

aiw add @ai-website/florist

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

Usage

<Florist variant="card-message" palettes={[…]} ideas={["…"]} maxLength={160} sender="…" />

Source

Workshops

Dates with every seat as a dot, free ones green, they pop in while scrolling. Open a date, choose the people and book, the price follows.

Open in Studio

Installv1.0.0

aiw add @ai-website/florist

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

Usage

<Florist variant="workshops" workshops={[{ id, title, date, duration, price, seats, taken, text }]} />

Source

Details

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

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/florist.tsx
Brings along: utilskitbutton icon inputsectionmotion
npm packages: None
Languages: English and German, 45 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The FloristProps interface from components/ui/florist.tsx, with the comments from the code.

variantoptional
FloristVariant
bouquet-builderoccasionsdeliverycard-messageworkshops
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
palettesoptional
FloristPalette[]
bouquet-builder, occasions, card-message: colour sets of the drawn bouquets
sizesoptional
FloristSize[]
bouquet-builder
extrasoptional
{ id: string; label: string; price: number; icon?: IconName }[]
occasionsoptional
FloristOccasion[]
occasions
cutoffoptional
string
delivery: order cut off for same day, days ahead, closed weekdays (0 Sunday) and zones
daysAheadoptional
number
closedDaysoptional
number[]
zonesoptional
FloristZone[]
nowoptional
{ date: string; time: string }
delivery: fixed time for the countdown, e.g. { date: '2026-10-21', time: '11:46' }. Defaults to the browser clock.
ideasoptional
string[]
card-message
maxLengthoptional
number
senderoptional
string
workshopsoptional
FloristWorkshop[]
workshops
currencyoptional
string

Built-in texts

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

Show all 45 texts

Key	English	German
size	English Size	German Größe
palette	English Colours	German Farben
extras	English Extras	German Extras
total	English Your bouquet	German Dein Strauß
add	English Add to basket	German In den Warenkorb
added	English In your basket	German Im Warenkorb
tip	English Good to know	German Gut zu wissen
occasion	English Occasion	German Anlass
from	English from {price}	German ab {price}
order	English Order before {time} for delivery today	German Bis {time} Uhr bestellen, heute geliefert
left	English {h} h {m} min left	German noch {h} Std. {m} Min.
tomorrow	English Delivered from tomorrow	German Lieferung ab morgen
day	English Delivery day	German Liefertag
slot	English Time	German Uhrzeit
morning	English Morning	German Vormittags
afternoon	English Afternoon	German Nachmittags
evening	English Evening	German Abends
morningTime	English 9 AM to 12 PM	German 9 bis 12 Uhr
afternoonTime	English 12 to 4 PM	German 12 bis 16 Uhr
eveningTime	English 4 to 7 PM	German 16 bis 19 Uhr
today	English Today	German Heute
postcode	English Postcode	German Postleitzahl
check	English Check	German Prüfen
inZone	English We deliver to {zone}, {fee}	German Wir liefern nach {zone}, {fee}
free	English free	German kostenlos
outZone	English Outside our area, we ship by parcel in a box	German Außerhalb unseres Gebiets, wir verschicken im Karton
sameDay	English Same day possible	German Am selben Tag möglich
motif	English Card	German Karte
message	English Your message	German Dein Kartentext
chars	English {n} of {max} characters	German {n} von {max} Zeichen
ideas	English Ideas	German Ideen
front	English Front	German Vorderseite
back	English Inside	German Innen
signed	English From	German Von
save	English Use this card	German Diese Karte nehmen
saved	English Card saved to your order	German Karte zur Bestellung gelegt
seatsLeft	English {n} of {total} seats free	German {n} von {total} Plätzen frei
full	English Fully booked	German Ausgebucht
people	English People	German Personen
book	English Book {n} seats	German {n} Plätze buchen
bookOne	English Book one seat	German Einen Platz buchen
booked	English Booked. The confirmation is on its way.	German Gebucht. Die Bestätigung ist unterwegs.
waitlist	English Join the waiting list	German Auf die Warteliste
minus	English One less	German Eine Person weniger
plus	English One more	German Eine Person mehr

Read from the source of the component.

Florist handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-expanded, aria-label, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
Uses the roles checkbox, group, radio, radiogroup, status, tab and tablist.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
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 Florist?

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

Which variants does Florist have?

5 variants, Bouquet builder, By occasion, Same day delivery, Greeting card and Workshops. You pick one with the variant prop, for example variant="occasions".

Can I translate the texts of Florist?

Yes. Florist carries 45 texts of its own in English and German, such as “Size”, “Colours” and “Extras”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Florist?

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

Can I adjust Florist without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Florist on a page.

Florist

Bouquet builder

By occasion

Same day delivery

Greeting card

Workshops

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with