This is the biggest SportyBlocks update so far. We added two brand new categories, Tickets and Head-to-Head, and released 11 new components in total. The library now counts 87 sports components for Tailwind CSS, each one available in both React and HTML versions, with light and dark mode included.

As always, the update is free for all customers.

New Tickets category with live countdown timers

Sports sites sell tickets, so SportyBlocks now has components for that. The new Tickets category starts with two components:

• Ticket v1: A match ticket card with the league name, date, team logos, a buy button, and a live countdown to kickoff. The card has a classic tear-off shape with side notches, and it works on any background because the notches are real cutouts, not painted circles.
• Ticket v2: A more compact take on the same idea, with a league header bar and the same tear-off countdown stub.

The countdown is the fun part. Set a kickoff date and it ticks down live, in both the React and the plain HTML versions of the component. If you leave the date empty, it runs in demo mode so the component looks alive out of the box.

New Head-to-Head category

The Head-to-Head category is all about comparing two teams before or during a match. It launches with five components:

• Head-to-Head v1 to v4: Side-by-side team comparisons with stat bars, percentages, and win/loss numbers. The bar colors are driven by your team data, so switching teams updates the whole component.
• Head-to-Head v5: A possession-style comparison with a segmented bar between the two team logos. The segments always render as whole blocks at any width, and the whole effect is pure CSS.

Match Schedule v8 and Match Overview v3

Two existing categories also got new members:

• Match Schedule v8: A schedule table that handles two leagues in one component, each with its own header band. Every row shows the date, teams, venue, broadcaster, and kickoff time. We also reworked how the rounded table corners are built, so the component renders identically in Chrome, Safari, and Firefox.
• Match Overview v3: A full post-match report card with the final score, team records, a quarter-by-quarter scoring table, and stat comparison bars for yards, downs efficiency, and penalties.

Scoreboard v11 and v12

The Scoreboard family grows to twelve with two new layouts:

• Scoreboard v11: A bold split scoreboard with a full-color panel per team, oversized team logos, and a footer with the league name and match date.
• Scoreboard v12: A live-match scoreboard with skewed score panels in team colors, the match date on top, and the current period and game clock below.

Under the hood

A few smaller things shipped alongside the new components:

• All component preview images are now retina-ready.
• Cross-browser fixes for table-based components, so rounded corners and borders look the same in every browser.
• The included Figma file is updated to 1.2.0 with all the new components.
• The whole library runs on the latest Tailwind CSS 4.

Get the latest update

If you already own SportyBlocks, the updated package is waiting on your Downloads page, free as always. If you don't own it yet, you can get all 87 components with lifetime updates from our Pricing page, or try the free components first.

Questions or a component you'd love to see next? Tell us. Your suggestions directly shape what we build next. Several components in this update started as customer suggestions.