SportyBlocks: sports UI components for Tailwind CSS, React and HTML

Building a club, league, or esports site? SportyBlocks is a library of 87 hand-built Tailwind CSS components for exactly that: scoreboards, standings tables, match schedules, player cards, tickets with live countdowns, and more. Copy the React or HTML version into any project, restyle with your team colors, ship. One purchase, lifetime updates, Figma file included.

What’s included

87 components, 17 categories
Scoreboards, standings, latest results, match schedules, player cards, rosters, lineups, tactics, head-to-head comparisons, tickets and more. Built for club, league and esports sites.

React and HTML, both included
Every component ships as a React (JSX) component and as plain HTML. Copy the version your stack uses; nothing to install.

Light and dark mode
Each component is styled for both themes and fully responsive out of the box. Swap in your team colors with Tailwind’s utility classes.

Tailwind CSS 4, no dependencies
Plain markup and utility classes. No component framework, no runtime, no JavaScript libraries; even the ticket countdowns run on a few lines of vanilla JS.

Figma source file
All 87 components as a Figma file, kept in sync with the code. Design the page first, then build it with the matching blocks.

Lifetime updates, commercial license
One purchase, every future component and fix included; the library has grown from 70 to 87 since launch. Use it in client projects. Documentation and author support included.

Categories

  • Scoreboards (12)
  • Match Schedules (8)
  • Featured Players (7)
  • Player Cards (6)
  • Team Cards (6)
  • Standings (5)
  • Latest Results (5)
  • Player Stats (5)
  • Player Matchups (5)
  • Team Rosters (5)
  • Team Lineups (5)
  • Team Tactics (5)
  • Head-to-Head (5)
  • Match Overview (3)
  • Team Stats (3)
  • Tickets (2)

Not sure yet? Try it free. Five components (Scoreboard, Standings, Latest Results, Player Card, and Player Stats) are free to download in both React and HTML, no account needed. They’re full versions, not demos, and they get the same updates as the paid library. If they fit your project, the other 82 are one purchase away.

Components

Latest results
Head to head
Player card
Player card
Player matchup
Team stats

Everything you need to know

No. Every component ships in two versions: a React (JSX) component and a plain HTML file with the same Tailwind CSS 4 classes. Use whichever fits your project; both are in the download.

Yes. Five components are free, with the full React and HTML source. Grab them on the pricing page and drop them into a real project first.

One purchase, $49, licensed to one person or company. Build as many sites and apps as you like, including client projects and products you sell. The only things you can’t do are resell or share the components themselves, for example as a UI kit, theme or website builder. Full terms are on the license page.

Every component added after your purchase is included at no extra cost, along with fixes and framework updates. The library launched with 70 components and stands at 87 today.

Yes, 14 days on every purchase. If a component doesn’t work as described and we can’t fix it for you, you get a full refund through Paddle, the same checkout you paid with. Details on the refund policy page.

Bugs, yes: report one and it gets fixed. Integrating components into your project, custom changes and third-party setup aren’t part of support, but the SportyBlocks Discord is a good place to ask, and the docs cover each component.

$49 / one-time

  • 87 sports components
  • Every component in both React (JSX) and plain HTML
  • Light and dark mode, fully responsive, Tailwind CSS 4
  • Figma source file for all components
  • One-time purchase with lifetime updates
  • Commercial license for client projects
  • 5 free components to try before buying

Sold on sportyblocks.com — checkout, invoicing and licensing run there.

You might also like