By the author of Alchemists
Sports components for Tailwind CSS
Scoreboards, standings, player cards, tickets and more, in HTML and React with light and dark versions. Copy one into your project and it’s ready to use.
Browse components
Made for sports sites
Built for clubs, leagues and sports media
Results, fixtures, tables, line-ups and player profiles, designed together so the whole site looks like one product.
87 sports components
Browse by category
Every category in the library, from scoreboards and standings to team and player cards, each in several versions.
Sports components
Standings
5 Components
Latest Results
5 Components
Player Cards
6 Components
Player Stats
5 Components
Players Matchup
5 Components
Featured Players
7 Components
Team Cards
6 Components
Team Rosters
5 Components
Team Lineups
5 Components
Team Tactics
5 Components
Team Stats
3 Components
Scores Carousel
Coming Soon
Esports components
Coming SoonScoreboards
Coming Soon
Match Overview
Coming Soon
Streamer Box
Coming Soon
Team Lineups
Coming Soon
Players Matchup
Coming Soon
Features
What you get with SportyBlocks
One purchase, every component, and the files to design and build with them.
87 components
Scoreboards, standings, player cards, tickets, head-to-head cards and more, all responsive and ready to drop into a page.
One-time purchase
Pay once and keep everything. No subscription and no recurring fees.
Lifetime updates
Fixes and new components arrive as free updates, and everything added later is yours too.
Tailwind CSS 4
Plain Tailwind utility classes, so changing colors, spacing or fonts means editing a class, not fighting a stylesheet.
Figma source files
The Figma file for every component, so you can plan a page in design before you build it.
Light and dark versions
Every component works in light and dark mode out of the box, using Tailwind's dark variant.
Questions & answers
Your sports website questions, answered
The short answers to what people ask us most.
Free package
Start with five free components
Download the free package, try the components in your own project, and get the full library when you’re ready.