HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • Artwork
  • 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
  • Form Guide
  • Hover Card
  • Icon Tile
  • Image Export
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • League Table
  • Marquee
  • Match Score
  • 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
  • Stat Tabs
  • 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
  • Standings
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Templates
  • Sign In Page
  • Upload Page
  • Agreement Sign
  • Email
  • Email Composer
  • Share Dialog
  • Integrations
  • Transactions
  • Analytics
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

League Table

PreviousNext

A football league table with short, full and form views, coloured zones and the team pinned while the numbers scroll.

Base UIReact AriaRadix UI
Premier League
#TeamPWDLGFGAGDPtsForm
1Arsenal7511198+1116WWWWW
2Man City7511188+1016DWLWW
3Tottenham7421169+714WDWWW
4Liverpool7412128+413WWWDL
5Chelsea74031510+512LWWWL
6Crystal Palace74031310+312WWLWW
7Newcastle73221412+211WWWLL
8Aston Villa73131110+110WLLLW
  • Champions League
  • Europa League
  • Conference League

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/league-table.json

Usage#

import { LeagueTable, LeagueTableLegend } from "@/components/ui/league-table"
<div className="@container">
  <LeagueTable
    view="full"
    highlight={[match.homeId, match.awayId]}
    linkAs={Link}
    rows={[
      {
        id: "arsenal",
        team: { name: "Arsenal", crest: "/crests/arsenal.png", href: "/teams/arsenal" },
        played: 7, won: 5, drawn: 1, lost: 1, goalsFor: 19, goalsAgainst: 8, points: 16,
        form: "WWWWW",
        zone: "champions",
      },
    ]}
  />
  <LeagueTableLegend rows={rows} />
</div>

Props#

  • rows. One per team, in table order. position defaults to the place in the list, so tied teams can share one.
  • view. short shows P, GD and Pts. full adds W, D, L, GF, GA and the form. form shows only the last five.
  • highlight. Row ids to mark, such as the two teams in a match.
  • zones. Keys to a label and a colour class for the bar on the left of a row. LEAGUE_TABLE_ZONES has champions, europa, conference, promotion, playoff and relegation.
  • linkAs. The element team links render as, such as Next's Link. Rows link when team.href is set.

Wider than its frame, the table scrolls sideways and the team column stays put. The pinned cell paints --league-table-bg (the card colour by default), so set that variable when the table sits on another surface. Put the table inside an @container so it sizes columns to its frame.

LabelMarker

On This Page

InstallationUsageProps