Sports club

For clubs and teams. The next match with countdown, fixtures and results, the league table, the squad and membership with departments.

5 variants

Switch category

Next match

Both crests fly in from their side, a countdown ticks, tickets and calendar below, the last meetings with results next to it.

Open in Studio

Installv1.0.0

aiw add @ai-website/sports-club

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<SportsClub variant="next-match" match={{ date, time, home, away, competition, venue, ticketsHref }} history={[…]} />

Source

Fixtures and results

Upcoming matches and results on a gliding switch. The next match stands out, results are tinted as win, draw or loss.

Open in Studio

Installv1.0.0

aiw add @ai-website/sports-club

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<SportsClub variant="fixtures" matches={[{ id, date, time, home, away, competition, venue, score, ticketsHref }]} />

Source

League table

Zones for promotion and relegation, your club highlighted, form as dots, points with a bar that grows. On phones only the columns that matter.

Open in Studio

Installv1.0.0

aiw add @ai-website/sports-club

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<SportsClub variant="table" table={[{ team, played, won, drawn, lost, goalsFor, goalsAgainst, form }]} promotion={2} relegation={2} />

Source

Squad

Players by position on a gliding switch. Each card shows number and name over the portrait and turns to stats on a tap.

Open in Studio

Installv1.0.0

aiw add @ai-website/sports-club

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<SportsClub variant="squad" players={[{ number, name, position, image, since, stats: [{ label, value }] }]} />

Source

Membership

Tiers to pick, departments to add, the fee yearly or monthly on a gliding switch, what the tier includes and the admission fee.

Open in Studio

Installv1.0.0

aiw add @ai-website/sports-club

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<SportsClub variant="membership" tiers={[{ id, title, price, description, points, featured }]} departments={[{ id, label, price, icon }]} admissionFee={20} />

Source

Details

What Sports club brings along, read from the registry and the source.

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

Props

The SportsClubProps interface from components/ui/sports-club.tsx, with the comments from the code.

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

Built-in texts

Sports club writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 47 texts

Key	English	German
kickoff	English Kick-off	German Anstoß
days	English days	German Tage
hours	English hours	German Std.
minutes	English min	German Min.
seconds	English sec	German Sek.
tickets	English Get tickets	German Tickets sichern
calendar	English Add to calendar	German In den Kalender
h2h	English Last meetings	German Letzte Duelle
upcoming	English Upcoming	German Kommende
results	English Results	German Ergebnisse
show	English Show	German Zeigen
home	English Home	German Heim
away	English Away	German Auswärts
win	English Win	German Sieg
draw	English Draw	German Unentschieden
loss	English Loss	German Niederlage
vs	English against	German gegen
versus	English vs	German gegen
pos	English Pos.	German Pl.
team	English Team	German Mannschaft
played	English P	German Sp.
playedLong	English Played	German Spiele
w	English W	German S
d	English D	German U
l	English L	German N
goals	English Goals	German Tore
diff	English GD	German Diff.
points	English Pts	German Pkt.
pointsLong	English Points	German Punkte
form	English Form	German Form
promotion	English Promotion	German Aufstieg
relegation	English Relegation	German Abstieg
positions	English Positions	German Positionen
all	English All	German Alle
since	English Since {year}	German Seit {year}
flip	English Show stats for {name}	German Statistik von {name} zeigen
perYear	English / year	German / Jahr
perMonth	English / month	German / Monat
yearly	English Yearly	German Jährlich
monthly	English Monthly	German Monatlich
departments	English Add departments	German Abteilungen dazu
deptFee	English +{price} per year	German +{price} pro Jahr
included	English Included	German Inklusive
join	English Become a member	German Mitglied werden
total	English Your fee	German Dein Beitrag
entry	English One-time admission fee {price}	German Einmalige Aufnahmegebühr {price}
popular	English Most chosen	German Am häufigsten gewählt

Read from the source of the component.

Sports club handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Home itself.
Sets aria-checked, aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
Uses the roles radio and radiogroup.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
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

Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 5 places in the code switch motion off then.

Frequent questions

How do I install Sports club?

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

Which variants does Sports club have?

5 variants, Next match, Fixtures and results, League table, Squad and Membership. You pick one with the variant prop, for example variant="fixtures".

Can I translate the texts of Sports club?

Yes. Sports club carries 47 texts of its own in English and German, such as “Kick-off”, “days” and “hours”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Sports club?

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

Can I adjust Sports club without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Sports club on a page.

Sports club

Next match

Fixtures and results

League table

Squad

Membership

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with