WebberUI
繁體中文

Wedding Invitation

Single-page wedding invitation: countdown, story timeline, schedule, venue, RSVP.

ProIndustrywedding7 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/wedding-invitation.en.json?t=<install token>"

The whole page lands in app/templates/wedding-invitation/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Cover and Wedding Countdown

    Nav bar and a cover carrying the couple's names, the wedding date, a live countdown and an RSVP button.

    hero
  2. 2

    A Heartfelt Invitation

    The invitation written in the voice of a wedding card, signed by both sets of parents, with a suggested dress palette.

    content
  3. 3

    Our Story

    A staggered timeline tracing the couple's seven years from first meeting to the proposal.

    timeline
  4. 4

    Wedding Schedule

    Two schedule cards — the ceremony and the evening reception — listing the day's timings item by item.

    features
  5. 5

    Venue

    A hand-drawn style map alongside the venue introduction, with the address, shuttle service and parking details.

    contact
  6. 6

    RSVP

    An interactive RSVP form covering attendance, party size, dietary preferences and a message for the couple.

    form
  7. 7

    Thank-You Footer

    A floral-trimmed thank-you sign-off with a contact email, the wedding planner's phone number and the wedding hashtag.

    footer

Wedding Invitation is a React wedding invitation website template: one page with a countdown, a story timeline, the day's schedule, the venue and an RSVP form. It is built with Next.js App Router, Tailwind CSS and Motion.

When to use it

  • A couple's own online invitation and wedding info page
  • A starting design for wedding planners or invitation studios
  • Engagement or reception invitations that need a countdown and RSVP
  • Anniversary parties or other private events with a schedule and venue

What to change after installing

  1. Set `WEDDING_TS` at the top of page.tsx to your date; the countdown updates every second from it.
  2. The couple's names appear in several places, including `Navbar`, `Hero`, `Invitation` and `Footer`, so a find-and-replace is easiest; the story, schedule and venue come from the `STORY_EVENTS`, `CEREMONY_SCHEDULE` / `BANQUET_SCHEDULE` and `VENUE_INFO` arrays.
  3. The venue map is an SVG illustration, not a real map; replace it with your own map embed or image if needed.
  4. The RSVP form only switches to a confirmation view in the browser and sends nothing; wire `handleSubmit` in `RsvpForm` to your own form service or API. Guest counts and meal options are in `GUEST_COUNTS` and `DIET_OPTIONS`.
  5. Colors are hex values inside Tailwind classes (for example `#B06A73` and `#4A3F3C`); a find-and-replace recolors the page.

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →