Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Sports Coach Profile Block for React

A youth coach's season results strip: sixteen games as W, L or D cells with opponent initials and a home or away glyph, a record and win rate that follow a Home and Away toggle, and a score and note for any game.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a season at a glance, with this sports coach profile for React with Base UI. A compact header names the team-management app, and the hairline frame under it opens on the coach: initials, name, role and place. A toolbar band holds a Toggle Group with Home and Away, each with its game count, and the record ("11-3-2") and win rate beside it. Both are worked out from the typed scores, never typed twice. Sixteen games sit in two rows of eight cells, each a letter for the result, the opponent's initials and a house or bus glyph; the games the toggle leaves out are dimmed rather than hidden, so the strip never reflows. Pressing a game reads its score and the coach's note in a held panel. A Data List gives the games counted and the goals for and against, and the coach's philosophy closes the panel as one quote. The foot, ruled by Guides, holds a status line. It's built from Toggle Group, Data List, Badge, Avatar and Guides, with a CSS entrance only. For a club page, a team site or any profile that keeps a season.

FAQ

How do I fill it with my own season?

Edit GAMES. Each has an id, an ISO date, an opponent, a venue of home or away, the goals for and against, and a note. The result letter, the initials, the record, the win rate and the goal totals are all worked out from those rows. The opponents here are invented.

What do Home and Away do?

They choose which games count. Both are on at the start. Turning one off dims its games, takes them out of the record, the win rate and the goal totals, and the status line says what is now counted. Turning both off counts nothing and shows a dash for the win rate, rather than a made-up number. A dimmed game can still be pressed and read.

What does pressing a game do?

It shows that game's result, score, venue, date and the coach's note in the panel under the strip, and the pressed cell turns to solid foreground. The panel keeps its height for the longest note. Each cell is a named button, such as "16 May, away against Lowfield Harriers: lost 1 to 3".

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

Everything. The games are typed and nothing is sent or saved. To make it real, load the fixtures and results from your own team system and pass them in place of GAMES.

How does it look on a phone?

The two rows of eight cells become four rows of four, each still a full button with the letter, initials and glyph. The toolbar wraps and the record stays beside the toggle. The score and dates keep their order in a right-to-left layout.

All 100 profile blocks