Football UI

A free to use React TailwindCSS Football UI library built around Sportmonks Football API 3.0 data endpoints

Official website →

How to use →

Storybook →

Football UI in action →

Prerequisites

Sportmonks API subscription

The Football UI library is build around Sportmonks Football API 3.0 and a api key is required. Sportmonks offer a 14 day trial and a free plan including the Danish Superliga and Scottish Premiership.

We recommend going with the Standard data features, but several of our key components will work with Basic data features.

For Sportmonks API documentation, tutorials and guides we refer to their extensive documentation.

The creaters of Football UI are not affiliated with Sportmonks and we do not provide any support for their API.

Technical requirements

React 18 → or later

Tailwind CSS 3.4 → or later

Install

npm i @livescoresnu/footballui

To ensure TailwindCSS generates the CSS for the component, add the library path to the content section of tailwind.config.js:

module.exports = {
  content: [
    //...
    "./node_modules/@livescoresnu/footballui/**/*.{js,jsx,ts,tsx}",
  ],
  //...

Optionally, install TailwindCSS 3D. Only required for the trapezidium variant of the formation field component:

npm install -D tailwindcss-3d

And add the plugin to the plugin section of tailwind.config.js:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-3d"),
    // ...
  ],
};

Use

Once you have installed the package you can import the components you want to use in your project:

import { EventItem } from "@livescoresnu/footballui";

Each component is built around a single API request and the data should be passed as the data props to the component. E.g. for the EventItem component, the api request would be as follows for a given fixture_id:

https://api.sportmonks.com/v3/football/fixtures/<fixture_id
  >?includes=events:player_name,minute,result;participants:image_path,name;venue:image_path;scores;periods&api_token=<api_token
  ></api_token
></fixture_id>

Where the response is passed as sportmonksApiData to the EventItem components data prop:

<EventItem
  data={sportmonksApiData}
  showLogos={true}
  showEventClockAndStatus={true}
  size={"medium"}
  isLoading={false}
  showAsCard={true}
  showEventDate={true}
  showScores={true}
  showTime={true}
  showLeagueLogo={true}
/>

Each component has a variety of props that can be used to customize the appearance. The props are documented in the component section of the documentation and can be explored in the Storybook