HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Menubar
  • Meter
  • Multi Select
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Sports Score

PreviousNext

Live football scores grouped by league, with a match page for events, lineups, stats and the table, built from Another UI primitives.

Sun 11 Oct

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/sports-score.json

Features#

  • Scores by league. Matches are grouped under each league with its crest, and each group collapses.
  • Match states. Finished matches show FT, live ones show the minute in green, half time shows HT, and upcoming ones show the kick-off time. Red cards show above the score.
  • Live clock. In the demo, live matches move on a minute every three seconds. When a goal goes in, the score animates and a toast names the scorer.
  • Days and filters. Yesterday, Today and Tomorrow sit next to All, Live and Following (Segmented Control) in one toolbar row.
  • Match page. Tap a match for the big score and scorers, then Facts (a timeline of goals, cards and subs), Lineup (both teams on one pitch with goals, bookings and subs marked), Stats (possession, xG, shots and more) and Table.
  • Follow. Star a match to keep it under Following.
  • Motion. The match list and a match slide side by side, and scores pop in digit by digit when a goal goes in. All from transitions.dev.
  • Sounds. Cuelume plays on navigation, filters, folding a league, goals and follows.

Club crests from football-logos.cc.

Usage#

import { SportsScore, type Match } from "@/components/blocks/sports-score"
const matches: Match[] = [
  {
    id: "tot-ars",
    league: "premier-league",
    day: 0,
    home: "tottenham",
    away: "arsenal",
    kickoff: "14:00",
    minute: 67,
    state: "live",
    venue: "Tottenham Hotspur Stadium",
    referee: "Chris Kavanagh",
    events: [{ minute: 12, side: "home", kind: "goal", player: "Solanke", detail: "Kudus" }],
  },
]
 
<SportsScore matches={matches} tickMs={0} />

Set tickMs to 0 when the data comes from a real feed.

Lineup BuilderStrava

On This Page

InstallationFeaturesUsage