caliper uidocs
DemoSign inGet Pro

Fixtures

Block

A list of matches or events grouped by date, with scores.

Installs components/ui/fixtures.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/fixtures.json

Autumn cup

Thursday, October 8

  • Wharf Arena, Leeds

  • Kestrel Park

Friday, October 9

  • Riverside Ground

When to use #

Use it for

  • Showing a sports schedule and results.

Skip it when

  • A single event.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/fixtures.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { useState } from "react"
import { Fixtures, type Fixture } from "@/components/ui/fixtures"

const fixtures: Fixture[] = [
  { id: "g1", round: "Group stage", start: "2026-10-08T14:00:00Z", status: "final", home: { name: "Leeds Harriers", score: 2 }, away: { name: "Porto Mariners", score: 1 }, venue: "Wharf Arena, Leeds" },
  { id: "g2", round: "Group stage", start: "2026-10-08T17:00:00Z", status: "live", minute: "67'", home: { name: "Kestrel FC", score: 1 }, away: { name: "Nordic Union", score: 1 }, venue: "Kestrel Park" },
  { id: "g3", round: "Group stage", start: "2026-10-09T15:30:00Z", status: "upcoming", home: { name: "Riverbank City" }, away: { name: "Lumen United" }, venue: "Riverside Ground" },
  { id: "g4", round: "Group stage", start: "2026-10-09T18:00:00Z", status: "upcoming", home: { name: "Sable Athletic" }, away: { name: "Orchard Town" } },
  { id: "q1", round: "Quarter-finals", start: "2026-10-15T19:00:00Z", status: "upcoming", home: { name: "Leeds Harriers" }, away: { name: "Kestrel FC" }, venue: "Wharf Arena, Leeds" },
  { id: "q2", round: "Quarter-finals", start: "2026-10-16T19:00:00Z", status: "upcoming", home: { name: "Riverbank City" }, away: { name: "Porto Mariners" } },
];

export function FixturesDemo() {
  const [, setPicked] = useState("");
  return (
    <Fixtures fixtures={fixtures} title="Autumn cup" onSelect={(id) => setPicked(`Selected ${id}`)} />
  );
}

API reference #

Fixtures

component
PropTypeDefault
fixtures *readonly Fixture[]—
titlestring"Fixtures"
onSelect((id: string) => void)—
classNamestring—

Accessibility #

It is built on native elements and keeps aria-label, aria-expanded and aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.