Skip to content
UI Kit
Accent color

Events and webinars

Agenda by day, speakers, tickets, the venue on a map, a webinar sign-up and the recordings archive.

6 variants
Switch category

Events and webinars

Agenda with days

The program in tabs per day, with kinds, speakers and rooms.

Open in Studio

Speakers

Keynotes in large cards, everyone else in a portrait grid with their talk.

Open in Studio

Ticket tiers

Three tiers, one sold out, one running low.

Open in Studio

Venue with map

The place on a map with ways to get there and the facts that matter.

Open in Studio

Webinar sign-up

Date, hosts and what you learn next to a short form with seats left.

Open in Studio

Recordings

The latest talk large, the archive below with a topic filter.

Open in Studio

Details

What Events and webinars brings along, read from the registry and the source.

Area
Content
Variants
6
Version
1.0.1 · since 1.0.0
File
components/ui/events.tsx
Brings along
utilskitbuttonbadgeiconinputselectsectionreveal
npm packages
None
Languages
English and German, 36 texts of its own
Studio
All 6 variants editable
In collections
Event
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The EventsProps interface from components/ui/events.tsx, with the comments from the code.

  • variantoptional
    EventsVariant

    agendaspeakersticketsvenuewebinarrecordings

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • daysoptional
    EventDay[]
  • speakersoptional
    EventSpeaker[]
  • ticketsoptional
    EventTicket[]
  • ticketNoteoptional
    React.ReactNode

    tickets: a line under the cards, e.g. group discounts

  • venueoptional
    EventVenue
  • webinaroptional
    EventWebinar
  • recordingsoptional
    EventRecording[]
  • onSubmitoptional
    (data: FormData) => void | Promise<void>
  • actionoptional
    { label: string; href: string }

Built-in texts

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

Show all 36 texts
daysEnglish Conference daysGerman Konferenztage
sessionsEnglish {n} sessionsGerman {n} Programmpunkte
keynotesEnglish KeynotesGerman Keynotes
speakersAllEnglish All speakersGerman Alle Sprecherinnen und Sprecher
popularEnglish Most chosenGerman Am häufigsten gewählt
soldOutEnglish Sold outGerman Ausverkauft
buyEnglish Get ticketsGerman Tickets sichern
waitlistEnglish Join the waitlistGerman Auf die Warteliste
includedEnglish IncludedGerman Enthalten
addressEnglish AddressGerman Adresse
openMapEnglish Open in mapsGerman In Karten öffnen
getThereEnglish Getting thereGerman Anreise
registerEnglish Save my seatGerman Platz reservieren
registeringEnglish SavingGerman Wird reserviert
nameEnglish Full nameGerman Vor- und Nachname
emailEnglish Work emailGerman Geschäftliche E-Mail
companyEnglish CompanyGerman Firma
roleEnglish Your roleGerman Deine Rolle
rolePlaceholderEnglish Choose a roleGerman Rolle wählen
requiredEnglish Please fill in this field.German Bitte fülle dieses Feld aus.
invalidEmailEnglish Please enter a valid email address.German Bitte gib eine gültige E-Mail-Adresse ein.
freeEnglish Free, the recording follows by email.German Kostenlos, die Aufzeichnung kommt per E-Mail.
doneTitleEnglish Your seat is savedGerman Dein Platz ist reserviert
doneTextEnglish The link to join is on its way to your inbox, with a calendar invite.German Der Link zur Teilnahme ist mit einer Kalendereinladung auf dem Weg in dein Postfach.
calendarEnglish Add to calendarGerman In den Kalender
hostsEnglish Your hostsGerman Deine Gastgeber
learnEnglish What you will learnGerman Was du lernst
allEnglish All topicsGerman Alle Themen
topicsEnglish TopicsGerman Themen
watchEnglish Watch recordingGerman Aufzeichnung ansehen
latestEnglish Latest recordingGerman Neueste Aufzeichnung
keynoteEnglish KeynoteGerman Keynote
liveEnglish LiveGerman Live
dateEnglish DateGerman Datum
timeEnglish TimeGerman Uhrzeit
durationEnglish DurationGerman Dauer

Accessibility

Read from the source of the component.

  • Events and webinars handles the keys Arrow left, Arrow right, Home and End itself.
  • Sets aria-controls, aria-label, aria-labelledby, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
  • Uses the roles group, status, tab, tablist and tabpanel.
  • Announces changes through a live region without moving focus.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 13 places in the code switch motion off then.

Frequent questions

How do I install Events and webinars?

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

Which variants does Events and webinars have?

6 variants, Agenda with days, Speakers, Ticket tiers, Venue with map, Webinar sign-up and Recordings. You pick one with the variant prop, for example variant="speakers".

Can I translate the texts of Events and webinars?

Yes. Events and webinars carries 36 texts of its own in English and German, such as “Conference days”, “Keynotes” and “All speakers”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Events and webinars?

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

Can I adjust Events and webinars without code?

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

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Events and webinars on a page.

Often searched

Jump to

Copied to the clipboard