Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Live Sports Chat Block for Svelte

A match thread with a scoreboard worked out from a typed play-by-play of twelve plays, a Resume and Pause control, a Next play button and a Cheer count, with fans chatting between plays.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a match thread with this live sports chat for Svelte with Ark UI. A framed window of fixed height holds the Matchday bot's typed match between Harbour and Ridgeback, marked with a Badge that says Bot. A scoreboard band under the top bar shows the score and the minute, both worked out from the plays so far, and the log is the play-by-play: one row per play with its minute, a glyph and a sentence, with the fans' messages between. The page opens at minute 34 with Harbour ahead 1-0; "Resume" plays the remaining seven plays, one every 4 seconds, and becomes "Pause", "Next play" shows one by hand, and "Cheer" adds a "You cheered" line and a count. The composer's Shine Button is the only colored control, and the frame is ruled by Guides. The match is typed and labelled as not live.

FAQ

What stays in the page, and how do I make it real?

All of it. The twelve plays are typed in PLAYS, the score is counted from them and the cheers live in this block's state, as the line under the composer says. No match feed is read. To wire it for real, append plays to the same list as your data service sends them; the board, the minute and the glyphs are derived from the list.

How long does the match run, and can I stop it?

Pressing Resume adds one play every 4 seconds until the twelfth, at most 28 seconds, then stops by itself. The same button reads Pause while it runs. Nothing runs on its own when the page opens, and it stops when you leave.

What changes under reduced motion?

Resume shows all the remaining plays at once instead of one every 4 seconds, and Next play is always there to step by hand. Nothing else in the block animates besides a short fade on load.

How is the score worked out?

By counting the goal plays so far for each team, so it can only be what the log shows, and the minute is the last play's minute. Goals have a target glyph and a heavier outline, so they do not rely on color.

Is it usable with a keyboard and a screen reader?

Yes. The log is a focusable region announced as a log, so each play is read out as it lands, with its minute first. The scoreboard is a labelled section, the controls are buttons with plain names and the score reads left to right inside right-to-left text.

How does it look on a phone?

The scoreboard band keeps a fixed height, the three controls sit on one line, the window keeps its height and only the log scrolls, down to 320 px wide.