Zum Inhalt springen
UI Kit
Accent

Blumenladen

Für Floristen und Blumenläden. Ein Strauß-Konfigurator mit gezeichnetem Strauß, Sträuße nach Anlass, Lieferung am selben Tag mit Postleitzahl-Prüfung, die Grußkarte und Workshops.

5 Variants
Kategorie wechseln

Blumenladen

Strauß zusammenstellen

Größe, Farben und Extras wählen. Der gezeichnete Strauß blüht Blüte für Blüte neu auf und wiegt sich leise, der Preis gleitet in einer Leiste auf dem Bild.

Im Studio öffnen

Nach Anlass

Anlässe als runde Reiter. Passende Sträuße steigen nacheinander auf und heben sich beim Zeigen, daneben ein Hinweis, was zum Anlass passt.

Im Studio öffnen

Lieferung am selben Tag

Ein Ring zählt bis zum Bestellschluss für heute herunter. Tag und Uhrzeit wählen, geschlossene Tage sind durchgestrichen, und die Postleitzahl gegen die Liefergebiete prüfen.

Im Studio öffnen

Grußkarte

Karte wählen, schreiben oder eine Idee antippen. Die Karte zeigt vorne einen aufblühenden Strauß oder innen deine Worte, eine Leiste füllt sich mit den Zeichen.

Im Studio öffnen

Workshops

Termine mit jedem Platz als Punkt, freie grün, sie springen beim Scrollen herein. Einen Termin öffnen, Personen wählen und buchen, der Preis folgt.

Im Studio öffnen

Details

Was Blumenladen mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/florist.tsx
Bringt mit
utilskitbuttoniconinputsectionmotion
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 45 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

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

  • 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

Eingebaute Texte

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

Alle 45 Texte anzeigen
sizeEnglisch SizeDeutsch Größe
paletteEnglisch ColoursDeutsch Farben
extrasEnglisch ExtrasDeutsch Extras
totalEnglisch Your bouquetDeutsch Dein Strauß
addEnglisch Add to basketDeutsch In den Warenkorb
addedEnglisch In your basketDeutsch Im Warenkorb
tipEnglisch Good to knowDeutsch Gut zu wissen
occasionEnglisch OccasionDeutsch Anlass
fromEnglisch from {price}Deutsch ab {price}
orderEnglisch Order before {time} for delivery todayDeutsch Bis {time} Uhr bestellen, heute geliefert
leftEnglisch {h} h {m} min leftDeutsch noch {h} Std. {m} Min.
tomorrowEnglisch Delivered from tomorrowDeutsch Lieferung ab morgen
dayEnglisch Delivery dayDeutsch Liefertag
slotEnglisch TimeDeutsch Uhrzeit
morningEnglisch MorningDeutsch Vormittags
afternoonEnglisch AfternoonDeutsch Nachmittags
eveningEnglisch EveningDeutsch Abends
morningTimeEnglisch 9 AM to 12 PMDeutsch 9 bis 12 Uhr
afternoonTimeEnglisch 12 to 4 PMDeutsch 12 bis 16 Uhr
eveningTimeEnglisch 4 to 7 PMDeutsch 16 bis 19 Uhr
todayEnglisch TodayDeutsch Heute
postcodeEnglisch PostcodeDeutsch Postleitzahl
checkEnglisch CheckDeutsch Prüfen
inZoneEnglisch We deliver to {zone}, {fee}Deutsch Wir liefern nach {zone}, {fee}
freeEnglisch freeDeutsch kostenlos
outZoneEnglisch Outside our area, we ship by parcel in a boxDeutsch Außerhalb unseres Gebiets, wir verschicken im Karton
sameDayEnglisch Same day possibleDeutsch Am selben Tag möglich
motifEnglisch CardDeutsch Karte
messageEnglisch Your messageDeutsch Dein Kartentext
charsEnglisch {n} of {max} charactersDeutsch {n} von {max} Zeichen
ideasEnglisch IdeasDeutsch Ideen
frontEnglisch FrontDeutsch Vorderseite
backEnglisch InsideDeutsch Innen
signedEnglisch FromDeutsch Von
saveEnglisch Use this cardDeutsch Diese Karte nehmen
savedEnglisch Card saved to your orderDeutsch Karte zur Bestellung gelegt
seatsLeftEnglisch {n} of {total} seats freeDeutsch {n} von {total} Plätzen frei
fullEnglisch Fully bookedDeutsch Ausgebucht
peopleEnglisch PeopleDeutsch Personen
bookEnglisch Book {n} seatsDeutsch {n} Plätze buchen
bookOneEnglisch Book one seatDeutsch Einen Platz buchen
bookedEnglisch Booked. The confirmation is on its way.Deutsch Gebucht. Die Bestätigung ist unterwegs.
waitlistEnglisch Join the waiting listDeutsch Auf die Warteliste
minusEnglisch One lessDeutsch Eine Person weniger
plusEnglisch One moreDeutsch Eine Person mehr

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Blumenladen reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-expanded, aria-label, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen checkbox, group, radio, radiogroup, status, tab und tablist.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • 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 Blumenladen?

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

Welche Varianten hat Blumenladen?

5 Varianten, Strauß zusammenstellen, Nach Anlass, Lieferung am selben Tag, Grußkarte und Workshops. Du wählst sie mit der Prop variant, zum Beispiel variant="occasions".

Kann ich die Texte von Blumenladen übersetzen?

Ja. Blumenladen bringt 45 eigene Texte auf Deutsch und Englisch mit, etwa „Größe“, „Farben“ und „Extras“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Blumenladen einbauen?

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

Kann ich Blumenladen ohne Code anpassen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Blumenladen stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert