UpNext / List Card
List Card
<ListCard />StableA saved-list entry as a sidebar tab item — the row you click to open a list. A leading list-type glyph, the list name with a micro athlete-count counter, and an owner · time meta line. It's the 'which list am I viewing' control in the Lists / Boards sidebar, so one is selected at a time. Two list types, both built on the same NEUTRAL gray list glyph so a smart list still reads as a list: a standard list is the list glyph alone, and a smart list (AI/dynamic, auto-populated by criteria) adds a corner sparkle that rises to the second line. The nav stays quiet; color is the Activity Feed's job, not the sidebar's. Selection is a soft primary wash + the name in accent (regular weight, never bolder — the system selected convention); the glyph tints to primary to match, and the meta line tints to a muted primary, so the whole row reads as one selected unit instead of a clashing gray; hover is the neutral muted wash. Built on the Icon registry; every color resolves through tokens, dark mode ships free.
Lists panel — live
The Lists sidebar, 1:1 — the ListsPanel chrome (the FilterPanel skeleton: 296px column, 52px header with the list glyph, title, micro total and collapse) holding the saved lists categorized into ListsGroup stacks: smart lists, then standard lists, each under a micro eyebrow + hairline. Rows carry athlete count, owner and relative time; a smart list adds the corner sparkle to the same neutral gray glyph. Click a row to select it — one selection across both groups, the soft-wash convention.
Inspector
Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.
Preview
Code
import { ListCard } from "@/components/upnext";<ListCard />
States
A row is a link (href), a button (onSelect), or a static display (neither). Standard vs smart is a corner sparkle added at the smart list's bottom-right — both neutral gray; selection is the soft primary wash + accent name, with the meta tinted to a muted primary. Names truncate with a title tooltip so long list names never break the row.
{/* standard → the list glyph, neutral gray; count = athletes on the list */}<ListCard name="Top QB Players" count={12} owner="J. Rivera" timestamp="3d ago" />
Source
A domain family: the ListCard row (one bespoke drawn glyph — ListTypeGlyph, lucide's List grammar; smart shortens the middle + bottom lines and sets the filled sparkle in the cleared corner) plus the ListsPanel / ListsGroup chrome it stacks in — the FilterPanel skeleton with micro-eyebrow groups. The name + meta pair rides the TextBlock base by reference (as='span', row registers — the documented compact-nav deviations); the counter reads '128 athletes' to screen readers via a sr-only unit; groups carry real list semantics (role=group + ul, labelled by the eyebrow). Dumb chrome throughout; the page supplies the list data and owns selection.