ComponentsData display

Fixture list

Upcoming matches and results between two sides, for any head-to-head competition — a sports club, an esports series, a chess or debating league. Upcoming / Results tabs with counts, an optional competition and home/away filter, month rows, the next match marked, statuses (live, postponed, cancelled) and scores read as full sentences.

WAI-ARIA Tabs + HTML table components/fixture-list.tsx, components/standings-table.tsxtheme · material · accent · density · font

Northgate 2026/27 — Upcoming
Date	Competition	Match	Time
November 2026
SunNov 22	North LeagueRound 10	Northgate v ElmwoodNextLeague · North Park	2:00 PM
SunNov 29	District CupQuarter-final	Stonebridge v NorthgateCup · Bridge Ground	TBC
December 2026
SunDec 6	North LeagueRound 11	Northgate v WestfieldPostponedLeague · North Park	2:00 PM
January 2027
SunJan 10	North LeagueRound 12	Riverside v NorthgateLeague · Mill Field	2:00 PM

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { FixtureList } from "@vamos-ui/react";

<FixtureList
  side="Northgate"
  fixtures={matches}
  competitions={[{ id: "league", label: "North League" }, { id: "cup", label: "District Cup" }]}
  renderActions={(m) => <AddToCalendar match={m} />}
/>

A score without a status counts as finished; live, postponed and cancelled matches stay under Upcoming with a badge.

Dates and times use the locale formatter and its time zone — set timeZone on LocaleProvider to show local kick-off times.

The visible score is "2–1"; screen readers hear "Northgate 2, Riverside 1". The filter result count is announced politely.

Examples

Results first

defaultView="results": newest first, each score with the outcome square from your side's point of view.

Northgate results — Results
Date	Competition	Match	Score
November 2026
SunNov 1	North LeagueRound 9	Harbour Town v NorthgateLeague · Quay Road	Harbour Town 1, Northgate 2
October 2026
SunOct 18	District CupRound 2	Northgate v LakesideCup · North Park	Northgate 1, Lakeside 3
SunOct 11	North LeagueRound 8	Hillcrest v NorthgateLeague · Hill Lane	Hillcrest 0, Northgate 0
SunOct 4	North LeagueRound 7	Northgate v RiversideLeague · North ParkOkafor 12′, Lind 77′	Northgate 2, Riverside 1

No own side (a series schedule)

Without side there is no home/away filter or outcome; tags, links and a per-row action still work.

Winter series — Upcoming
Date	Match	Time
FriNov 20	Team Quark vs Team LeptonLiveBest of 3	6:00 PM
FriNov 20	Team Boson vs Team Gluon	8:30 PM
SatNov 21	Team Muon vs Team Quark	6:00 PM

API

FixtureList

Prop	Type	Default
`fixtures` { id, start, home, away, score?, status?, competition?, round?, venue?, details?, tags?, href? }. start is an instant, or "YYYY-MM-DD" when the time is not fixed (shows TBC).	`Fixture[]`	`—`
`competitions` Competition names; two or more add a multi-select filter.	`{ id, label, short? }[]`	`—`
`side` Your own side: home/away filter and tags, outcome squares on results, the next match marked.	`string`	`—`
`view / defaultView / onViewChange` Selected tab, controlled or not.	`"upcoming" \| "results"`	`"upcoming"`
`groupByMonth` Month header rows (locale-formatted).	`boolean`	`true`
`filters` Show the filter bar.	`boolean`	`true`
`renderActions` Trailing cell per match (calendar, tickets, reminders).	`(fixture) => ReactNode`	`—`
`caption` Names the tables for screen readers ("… — Upcoming").	`string`	`—`
`labels` Dictionary namespace "fixtureList": tab names, filter names, home/away, versus, scoreSpoken, timeTbc, statuses, empty, shown.	`Partial<FixtureListLabels>`	`—`
`formLabels` Outcome names (formGuide namespace).	`Partial<FormGuideLabels>`	`—`

fixtureOutcome(fixture, side)

Prop	Type	Default
`returns` The result from one side's point of view.	`"win" \| "draw" \| "loss" \| undefined`	`—`

Filter bar

Font picker