Zum Inhalt springen
UI Kit
Accent

Sportverein

Für Vereine und Mannschaften. Das nächste Spiel mit Countdown, Spielplan und Ergebnisse, die Tabelle, der Kader und die Mitgliedschaft mit Abteilungen.

5 Variants
Kategorie wechseln

Sportverein

Nächstes Spiel

Beide Wappen fliegen von ihrer Seite herein, ein Countdown tickt, darunter Tickets und Kalender, daneben die letzten Duelle mit Ergebnis.

Im Studio öffnen

Spielplan

Kommende Spiele und Ergebnisse auf einem gleitenden Schalter. Das nächste Spiel ist hervorgehoben, Ergebnisse sind als Sieg, Remis oder Niederlage getönt.

Im Studio öffnen

Tabelle

Zonen für Auf- und Abstieg, der eigene Verein hervorgehoben, Form als Punkte, Punkte mit wachsendem Balken. Auf dem Telefon nur die wichtigen Spalten.

Im Studio öffnen

Kader

Spieler nach Position auf einem gleitenden Schalter. Jede Karte zeigt Nummer und Name auf dem Porträt und wechselt mit einem Tipp zur Statistik.

Im Studio öffnen

Mitgliedschaft

Stufen zur Wahl, Abteilungen zum Dazubuchen, der Beitrag jährlich oder monatlich auf einem gleitenden Schalter, was die Stufe enthält und die Aufnahmegebühr.

Im Studio öffnen

Details

Was Sportverein mitbringt, aus Registry und Quellcode gelesen.

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

Props

Die Schnittstelle SportsClubProps aus components/ui/sports-club.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    SportsClubVariant

    next-matchfixturestablesquadmembership

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • matchoptional
    ClubMatch

    next-match: the match, and earlier meetings

  • historyoptional
    ClubMatch[]
  • nowoptional
    string

    next-match: the moment to count from, ISO. Defaults to the browser clock.

  • matchesoptional
    ClubMatch[]

    fixtures

  • tableoptional
    ClubTableRow[]

    table: rows in order, and how many places go up or down

  • promotionoptional
    number
  • relegationoptional
    number
  • playersoptional
    ClubPlayer[]

    squad

  • tiersoptional
    ClubTier[]

    membership

  • departmentsoptional
    { id: string; label: string; price: number; icon?: IconName }[]
  • admissionFeeoptional
    number
  • currencyoptional
    string

Eingebaute Texte

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

Alle 47 Texte anzeigen
kickoffEnglisch Kick-offDeutsch Anstoß
daysEnglisch daysDeutsch Tage
hoursEnglisch hoursDeutsch Std.
minutesEnglisch minDeutsch Min.
secondsEnglisch secDeutsch Sek.
ticketsEnglisch Get ticketsDeutsch Tickets sichern
calendarEnglisch Add to calendarDeutsch In den Kalender
h2hEnglisch Last meetingsDeutsch Letzte Duelle
upcomingEnglisch UpcomingDeutsch Kommende
resultsEnglisch ResultsDeutsch Ergebnisse
showEnglisch ShowDeutsch Zeigen
homeEnglisch HomeDeutsch Heim
awayEnglisch AwayDeutsch Auswärts
winEnglisch WinDeutsch Sieg
drawEnglisch DrawDeutsch Unentschieden
lossEnglisch LossDeutsch Niederlage
vsEnglisch againstDeutsch gegen
versusEnglisch vsDeutsch gegen
posEnglisch Pos.Deutsch Pl.
teamEnglisch TeamDeutsch Mannschaft
playedEnglisch PDeutsch Sp.
playedLongEnglisch PlayedDeutsch Spiele
wEnglisch WDeutsch S
dEnglisch DDeutsch U
lEnglisch LDeutsch N
goalsEnglisch GoalsDeutsch Tore
diffEnglisch GDDeutsch Diff.
pointsEnglisch PtsDeutsch Pkt.
pointsLongEnglisch PointsDeutsch Punkte
formEnglisch FormDeutsch Form
promotionEnglisch PromotionDeutsch Aufstieg
relegationEnglisch RelegationDeutsch Abstieg
positionsEnglisch PositionsDeutsch Positionen
allEnglisch AllDeutsch Alle
sinceEnglisch Since {year}Deutsch Seit {year}
flipEnglisch Show stats for {name}Deutsch Statistik von {name} zeigen
perYearEnglisch / yearDeutsch / Jahr
perMonthEnglisch / monthDeutsch / Monat
yearlyEnglisch YearlyDeutsch Jährlich
monthlyEnglisch MonthlyDeutsch Monatlich
departmentsEnglisch Add departmentsDeutsch Abteilungen dazu
deptFeeEnglisch +{price} per yearDeutsch +{price} pro Jahr
includedEnglisch IncludedDeutsch Inklusive
joinEnglisch Become a memberDeutsch Mitglied werden
totalEnglisch Your feeDeutsch Dein Beitrag
entryEnglisch One-time admission fee {price}Deutsch Einmalige Aufnahmegebühr {price}
popularEnglisch Most chosenDeutsch Am häufigsten gewählt

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Sportverein reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Pos1.
  • Setzt aria-checked, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen radio und radiogroup.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • 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

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 5 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Sportverein?

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

Welche Varianten hat Sportverein?

5 Varianten, Nächstes Spiel, Spielplan, Tabelle, Kader und Mitgliedschaft. Du wählst sie mit der Prop variant, zum Beispiel variant="fixtures".

Kann ich die Texte von Sportverein übersetzen?

Ja. Sportverein bringt 47 eigene Texte auf Deutsch und Englisch mit, etwa „Anstoß“, „Tage“ und „Std.“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Sportverein einbauen?

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

Kann ich Sportverein ohne Code anpassen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Sportverein stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert