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
  • 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.

Lineup Builder

PreviousNext

Pick a starting eleven on a pitch, choose a formation, swap players with the bench and hand out the armbands, built from Another UI primitives.

Tottenham Hotspur

Matchday 8 · Sat 17 Oct, 12:30·vsARS (H)

Bench

8 substitutes

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/lineup-builder.json

Features#

  • Pitch and list. See the eleven on a pitch in club colours, or as a list with each player's role.
  • Formations. Switch between 4-4-2, 4-3-3, 4-2-3-1, 3-5-2, 3-4-3 and 5-3-2. Players keep their order and move into the new lines.
  • Player card. Tap a player to open their card: position, recent form, the next three fixtures with difficulty, and matches, goals and assists this season. It opens as a bottom drawer on phones and a dialog on desktop (Responsive Dialog), and the season numbers are a Stat group.
  • Swap players. Choose Select replacement (or Bring on for a substitute) on the card, then tap another player on the pitch or the bench. On a desktop you can also drag one player onto another. Escape cancels.
  • Bench. The substitutes sit beside the pitch on wide frames and below it on phones.
  • Captain and vice. Hand out the armbands from a starter's card. If a captain is benched, the player coming on takes it over.
  • Out of position. A player in the wrong line gets a red flag, and the toolbar counts them.
  • Save and reset. Save stays off until something changes, and Reset goes back to the last saved lineup.
  • Motion. Players swap in with a soft blur, the out-of-position count pops in digit by digit, and the Save icon swaps to a check once saved. All from transitions.dev.
  • Sounds. Cuelume plays on select, swap, closing the card and save.

Club crests from football-logos.cc.

Usage#

import { LineupBuilder } from "@/components/blocks/lineup-builder"
import { SPURS_SQUAD } from "@/components/blocks/football-data"
<LineupBuilder
  team="tottenham"
  opponent="arsenal"
  squad={SPURS_SQUAD}
  onSave={(lineup) => console.log(lineup.formation, lineup.xi, lineup.bench)}
/>

The Pitch and Shirt parts are exported too, so other blocks can draw a pitch or a kit.

BankingSports Score

On This Page

InstallationFeaturesUsage