Weddings and events

For wedding venues, planners and event locations. Packages priced by guest count, the day from ceremony to last dance, a calendar with free dates, rooms by setup and a budget split.

5 variants

Switch category

Packages by guests

A guest slider with little seats that fill up. Every package prices itself for the guest count, total and price per person glide along.

Open in Studio

Installv1.0.0

aiw add @ai-website/wedding

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

Usage

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

Source

The day

The day from ceremony to last dance. While you scroll, a sun walks along its arc, the sky turns to night and every moment it passes lights up.

Open in Studio

Installv1.0.0

aiw add @ai-website/wedding

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

Usage

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

Source

Date inquiry

A month calendar with free Saturdays tinted and booked dates crossed out. Pick a day, it pops, and the request beside it confirms that it is free.

Open in Studio

Installv1.0.0

aiw add @ai-website/wedding

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

Usage

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

Source

Rooms by setup

Pick a setup and move the guest slider. Capacities change with a soft swap, rooms that fit turn green, their bars grow in while scrolling.

Open in Studio

Installv1.0.0

aiw add @ai-website/wedding

Brings along 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

Budget split

Set the budget and the guests, one bar splits into catering, venue, photos and the rest. Pointing at a part lights it up in bar and list, the amounts glide.

Open in Studio

Installv1.0.0

aiw add @ai-website/wedding

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

Usage

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

Source

Details

What Weddings and events brings along, read from the registry and the source.

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

Props

The WeddingProps interface from components/ui/wedding.tsx, with the comments from the code.

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

Built-in texts

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

Show all 35 texts

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

Read from the source of the component.

Weddings and events handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
Uses the roles group, radio, radiogroup and status.
Announces changes through a live region without moving focus.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Moves with the scroll, its progress follows the position on the page.
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 2 places in the code switch motion off then.

Frequent questions

How do I install Weddings and events?

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

Which variants does Weddings and events have?

5 variants, Packages by guests, The day, Date inquiry, Rooms by setup and Budget split. You pick one with the variant prop, for example variant="day-timeline".

Can I translate the texts of Weddings and events?

Yes. Weddings and events carries 35 texts of its own in English and German, such as “Guests”, “Total” and “Most booked”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Weddings and events?

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

Can I adjust Weddings and events without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Weddings and events on a page.