Hochzeiten und Events

Für Hochzeitslocations, Planer und Eventräume. Pakete nach Gästezahl, der Tag von der Trauung bis zum letzten Tanz, ein Kalender mit freien Terminen, Räume nach Bestuhlung und eine Budgetaufteilung.

5 Variants

Kategorie wechseln

Pakete nach Gästen

Ein Gäste-Regler mit kleinen Plätzen, die sich füllen. Jedes Paket rechnet sich für die Gästezahl, Gesamtpreis und Preis pro Person gleiten mit.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/wedding

Bringt mit utils, kit, button, icon, input, section, motion, slider

Usage

<Wedding variant="packages" guests={80} packages={[{ id, title, base, perGuest, includes: ["…"], featured }]} />

Source

Der Tag

Der Tag von der Trauung bis zum letzten Tanz. Beim Scrollen wandert eine Sonne über ihren Bogen, der Himmel wird zur Nacht und jeder Moment, den sie passiert, leuchtet auf.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/wedding

Bringt mit utils, kit, button, icon, input, section, motion, slider

Usage

<Wedding variant="day-timeline" moments={[{ time: "14:00", title, text, icon }]} />

Source

Terminanfrage

Ein Monatskalender mit getönten freien Samstagen und durchgestrichenen belegten Tagen. Einen Tag wählen, er springt, daneben bestätigt die Anfrage, dass er frei ist.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/wedding

Bringt mit utils, kit, button, icon, input, section, motion, slider

Usage

<Wedding variant="inquiry" startMonth="2027-05" booked={["2027-05-08"]} types={["…"]} />

Source

Räume nach Bestuhlung

Bestuhlung wählen und den Gäste-Regler schieben. Die Kapazitäten wechseln weich, passende Räume werden grün, ihre Balken wachsen beim Scrollen herein.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/wedding

Bringt mit utils, kit, button, icon, input, section, motion, slider

Usage

<Wedding variant="spaces" setups={[{ id, label, icon }]} spaces={[{ id, title, area, capacity: { banquet: 120 }, text, icon }]} />

Source

Budgetaufteilung

Budget und Gäste einstellen, ein Balken teilt sich in Essen, Location, Fotos und den Rest. Ein Teil leuchtet beim Zeigen in Balken und Liste auf, die Beträge gleiten.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/wedding

Bringt mit utils, kit, button, icon, input, section, motion, slider

Usage

<Wedding variant="budget" budget={25000} guests={80} items={[{ id, label, share, perGuest }]} />

Source

Details

Was Hochzeiten und Events mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

variantoptional
WeddingVariant
packagesday-timelineinquiryspacesbudget
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
packagesoptional
WeddingPackage[]
packages
guestsoptional
number
packages, spaces, budget: start value of the guest slider
momentsoptional
WeddingMoment[]
day-timeline: the moments of the day in order
startMonthoptional
string
inquiry: first month shown, YYYY-MM
bookedoptional
string[]
inquiry: booked dates, YYYY-MM-DD
typesoptional
string[]
inquiry: kinds of celebration
setupsoptional
{ id: string; label: string; icon?: IconName }[]
spaces: setups with a label, the first is chosen
spacesoptional
WeddingSpace[]
budgetoptional
number
budget
itemsoptional
WeddingBudgetItem[]
currencyoptional
string

Eingebaute Texte

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

Alle 35 Texte anzeigen

Schlüssel	Englisch	Deutsch
guests	Englisch Guests	Deutsch Gäste
guestsN	Englisch {n} guests	Deutsch {n} Gäste
perPerson	Englisch {price} per person	Deutsch {price} pro Person
total	Englisch Total	Deutsch Gesamt
popular	Englisch Most booked	Deutsch Am häufigsten gebucht
choose	Englisch Request this package	Deutsch {name} anfragen
includes	Englisch Included	Deutsch Enthalten
yourDay	Englisch Your day	Deutsch Euer Tag
pickDate	Englisch Pick a date	Deutsch Datum wählen
prev	Englisch Previous month	Deutsch Vorheriger Monat
next	Englisch Next month	Deutsch Nächster Monat
free	Englisch Free	Deutsch Frei
booked	Englisch Booked	Deutsch Belegt
saturday	Englisch Saturdays	Deutsch Samstage
chosen	Englisch {date} is still free	Deutsch Der {date} ist noch frei
chooseFirst	Englisch Pick a free date in the calendar	Deutsch Wählt ein freies Datum im Kalender
name	Englisch Your names	Deutsch Eure Namen
email	Englisch Email	Deutsch E-Mail
type	Englisch Kind of celebration	Deutsch Art der Feier
send	Englisch Ask for this date	Deutsch Datum anfragen
sent	Englisch Thank you. We hold {date} for you for seven days and call you tomorrow.	Deutsch Danke. Wir halten euch den {date} sieben Tage frei und rufen morgen an.
setup	Englisch Setup	Deutsch Bestuhlung
fits	Englisch Fits {n} guests	Deutsch Passt für {n} Gäste
tooSmall	Englisch Too small for {n}	Deutsch Zu klein für {n}
notFor	Englisch Not for this setup	Deutsch Nicht für diese Bestuhlung
area	Englisch {n} m²	Deutsch {n} m²
budget	Englisch Your budget	Deutsch Euer Budget
perGuestNote	Englisch Catering and drinks grow with the guest list	Deutsch Essen und Getränke wachsen mit der Gästeliste
breakdown	Englisch How it splits	Deutsch So teilt es sich auf
plan	Englisch Download the budget plan	Deutsch Budgetplan herunterladen
left	Englisch Per guest	Deutsch Pro Gast
freeSat	Englisch {n} free Saturdays	Deutsch {n} freie Samstage
freeSatOne	Englisch One free Saturday	Deutsch Ein freier Samstag
nameError	Englisch Please enter your names	Deutsch Bitte gebt eure Namen ein
emailError	Englisch Please enter a valid email address	Deutsch Bitte gebt eine gültige E-Mail-Adresse ein

Aus dem Quellcode der Component abgeleitet.

Hochzeiten und Events reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
Setzt aria-checked, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen group, radio, radiogroup und status.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 2 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Hochzeiten und Events?

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

Welche Varianten hat Hochzeiten und Events?

5 Varianten, Pakete nach Gästen, Der Tag, Terminanfrage, Räume nach Bestuhlung und Budgetaufteilung. Du wählst sie mit der Prop variant, zum Beispiel variant="day-timeline".

Kann ich die Texte von Hochzeiten und Events übersetzen?

Ja. Hochzeiten und Events bringt 35 eigene Texte auf Deutsch und Englisch mit, etwa „Gäste“, „Gesamt“ und „Am häufigsten gebucht“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Hochzeiten und Events einbauen?

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

Kann ich Hochzeiten und Events ohne Code anpassen?

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

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Hochzeiten und Events stehen.