Zum Inhalt springen
UI Kit
Accent

Events und Webinars

Programm nach Tagen, Sprecher, Tickets, der Ort auf der Karte, die Webinar-Anmeldung und das Archiv der Aufzeichnungen.

6 Variants
Kategorie wechseln

Events und Webinare

Programm mit Tagen

Das Programm in Reitern je Tag, mit Art, Sprechenden und Raum.

Im Studio öffnen

Sprecher

Keynotes in großen Karten, alle anderen im Porträtraster mit ihrem Vortrag.

Im Studio öffnen

Ticketstufen

Drei Stufen, eine ausverkauft, eine fast weg.

Im Studio öffnen

Veranstaltungsort mit Karte

Der Ort auf der Karte mit Anreise und den Fakten, auf die es ankommt.

Im Studio öffnen

Webinar-Anmeldung

Termin, Gastgeber und Lernziele neben einem kurzen Formular mit freien Plätzen.

Im Studio öffnen

Aufzeichnungen

Der neueste Vortrag groß, darunter das Archiv mit Themenfilter.

Im Studio öffnen

Details

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

Bereich
Content
Variants
6
Version
1.0.1 · seit 1.0.0
Datei
components/ui/events.tsx
Bringt mit
utilskitbuttonbadgeiconinputselectsectionreveal
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 36 eigene Texte
Studio
Alle 6 Variants bearbeitbar
In Sammlungen
Event
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

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

  • 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 }

Eingebaute Texte

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

Alle 36 Texte anzeigen
daysEnglisch Conference daysDeutsch Konferenztage
sessionsEnglisch {n} sessionsDeutsch {n} Programmpunkte
keynotesEnglisch KeynotesDeutsch Keynotes
speakersAllEnglisch All speakersDeutsch Alle Sprecherinnen und Sprecher
popularEnglisch Most chosenDeutsch Am häufigsten gewählt
soldOutEnglisch Sold outDeutsch Ausverkauft
buyEnglisch Get ticketsDeutsch Tickets sichern
waitlistEnglisch Join the waitlistDeutsch Auf die Warteliste
includedEnglisch IncludedDeutsch Enthalten
addressEnglisch AddressDeutsch Adresse
openMapEnglisch Open in mapsDeutsch In Karten öffnen
getThereEnglisch Getting thereDeutsch Anreise
registerEnglisch Save my seatDeutsch Platz reservieren
registeringEnglisch SavingDeutsch Wird reserviert
nameEnglisch Full nameDeutsch Vor- und Nachname
emailEnglisch Work emailDeutsch Geschäftliche E-Mail
companyEnglisch CompanyDeutsch Firma
roleEnglisch Your roleDeutsch Deine Rolle
rolePlaceholderEnglisch Choose a roleDeutsch Rolle wählen
requiredEnglisch Please fill in this field.Deutsch Bitte fülle dieses Feld aus.
invalidEmailEnglisch Please enter a valid email address.Deutsch Bitte gib eine gültige E-Mail-Adresse ein.
freeEnglisch Free, the recording follows by email.Deutsch Kostenlos, die Aufzeichnung kommt per E-Mail.
doneTitleEnglisch Your seat is savedDeutsch Dein Platz ist reserviert
doneTextEnglisch The link to join is on its way to your inbox, with a calendar invite.Deutsch Der Link zur Teilnahme ist mit einer Kalendereinladung auf dem Weg in dein Postfach.
calendarEnglisch Add to calendarDeutsch In den Kalender
hostsEnglisch Your hostsDeutsch Deine Gastgeber
learnEnglisch What you will learnDeutsch Was du lernst
allEnglisch All topicsDeutsch Alle Themen
topicsEnglisch TopicsDeutsch Themen
watchEnglisch Watch recordingDeutsch Aufzeichnung ansehen
latestEnglisch Latest recordingDeutsch Neueste Aufzeichnung
keynoteEnglisch KeynoteDeutsch Keynote
liveEnglisch LiveDeutsch Live
dateEnglisch DateDeutsch Datum
timeEnglisch TimeDeutsch Uhrzeit
durationEnglisch DurationDeutsch Dauer

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Events und Webinare reagiert selbst auf die Tasten Pfeil links, Pfeil rechts, Pos1 und Ende.
  • Setzt aria-controls, aria-label, aria-labelledby, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group, status, tab, tablist und tabpanel.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 13 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Events und Webinare?

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

Welche Varianten hat Events und Webinare?

6 Varianten, Programm mit Tagen, Sprecher, Ticketstufen, Veranstaltungsort mit Karte, Webinar-Anmeldung und Aufzeichnungen. Du wählst sie mit der Prop variant, zum Beispiel variant="speakers".

Kann ich die Texte von Events und Webinare übersetzen?

Ja. Events und Webinare bringt 36 eigene Texte auf Deutsch und Englisch mit, etwa „Konferenztage“, „Keynotes“ und „Alle Sprecherinnen und Sprecher“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Events und Webinare einbauen?

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

Kann ich Events und Webinare ohne Code anpassen?

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

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

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

Oft gesucht

Direkt zu

In die Zwischenablage kopiert