UI / Collecting

SetSummary

Set completion panel with standard, master, loading, empty, and error states.

Scarlet & Violet 151

63%

Pokemon • Scarlet & Violet • Sep 22, 2023

Cards: 178/207
Master: 228/360
Chase cards: 5/7
Missing: +22

1import { SetSummary, type SetSummaryProps } from "@cardspark/ui/collecting";2 3const setSummary = {4  name: "Scarlet & Violet 151",5  code: "MEW",6  game: "Pokemon",7  series: "Scarlet & Violet",8  releaseDate: "Sep 22, 2023",9  mode: "master",10  owned: 178,11  total: 207,12  masterOwned: 228,13  masterTotal: 360,14  chaseCards: [15    { id: "mew-199", name: "Charizard ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/199_hires.png" },16    { id: "mew-198", name: "Venusaur ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/198_hires.png" },17    { id: "mew-200", name: "Blastoise ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/200_hires.png", owned: false },18    { id: "mew-201", name: "Alakazam ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/201_hires.png" },19    { id: "mew-202", name: "Zapdos ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/202_hires.png" },20    { id: "mew-203", name: "Erika's Invitation", imageUrl: "https://images.pokemontcg.io/sv3pt5/203_hires.png", owned: false },21    { id: "mew-204", name: "Giovanni's Charisma", imageUrl: "https://images.pokemontcg.io/sv3pt5/204_hires.png" }22  ],23  missingCards: [24    { id: "mew-167", name: "Ivysaur", imageUrl: "https://images.pokemontcg.io/sv3pt5/167_hires.png" },25    { id: "mew-169", name: "Charmeleon", imageUrl: "https://images.pokemontcg.io/sv3pt5/169_hires.png" },26    { id: "mew-171", name: "Wartortle", imageUrl: "https://images.pokemontcg.io/sv3pt5/171_hires.png" },27    { id: "mew-175", name: "Psyduck", imageUrl: "https://images.pokemontcg.io/sv3pt5/175_hires.png" },28    { id: "mew-176", name: "Poliwhirl", imageUrl: "https://images.pokemontcg.io/sv3pt5/176_hires.png" },29    { id: "mew-177", name: "Machoke", imageUrl: "https://images.pokemontcg.io/sv3pt5/177_hires.png" },30    { id: "mew-178", name: "Tangela", imageUrl: "https://images.pokemontcg.io/sv3pt5/178_hires.png" }31  ]32} satisfies SetSummaryProps;33 34export function SetSummaryDemo() {35  return <SetSummary {...setSummary} />;36}

Installation

Install the package.

npm install @cardspark/ui

Import the shared stylesheet layer near your app root.

app/layout.tsx

1import "@cardspark/ui/tokens.css";2import "@cardspark/ui/themes/basement.css";3import "@cardspark/ui/styles.css";

Import and render SetSummary from its package entry point.

SetSummaryDemo.tsx

1import { SetSummary, type SetSummaryProps } from "@cardspark/ui/collecting";2 3const setSummary = {4  name: "Scarlet & Violet 151",5  code: "MEW",6  game: "Pokemon",7  series: "Scarlet & Violet",8  releaseDate: "Sep 22, 2023",9  mode: "master",10  owned: 178,11  total: 207,12  masterOwned: 228,13  masterTotal: 360,14  chaseCards: [15    { id: "mew-199", name: "Charizard ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/199_hires.png" },16    { id: "mew-198", name: "Venusaur ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/198_hires.png" },17    { id: "mew-200", name: "Blastoise ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/200_hires.png", owned: false },18    { id: "mew-201", name: "Alakazam ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/201_hires.png" },19    { id: "mew-202", name: "Zapdos ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/202_hires.png" },20    { id: "mew-203", name: "Erika's Invitation", imageUrl: "https://images.pokemontcg.io/sv3pt5/203_hires.png", owned: false },21    { id: "mew-204", name: "Giovanni's Charisma", imageUrl: "https://images.pokemontcg.io/sv3pt5/204_hires.png" }22  ],23  missingCards: [24    { id: "mew-167", name: "Ivysaur", imageUrl: "https://images.pokemontcg.io/sv3pt5/167_hires.png" },25    { id: "mew-169", name: "Charmeleon", imageUrl: "https://images.pokemontcg.io/sv3pt5/169_hires.png" },26    { id: "mew-171", name: "Wartortle", imageUrl: "https://images.pokemontcg.io/sv3pt5/171_hires.png" },27    { id: "mew-175", name: "Psyduck", imageUrl: "https://images.pokemontcg.io/sv3pt5/175_hires.png" },28    { id: "mew-176", name: "Poliwhirl", imageUrl: "https://images.pokemontcg.io/sv3pt5/176_hires.png" },29    { id: "mew-177", name: "Machoke", imageUrl: "https://images.pokemontcg.io/sv3pt5/177_hires.png" },30    { id: "mew-178", name: "Tangela", imageUrl: "https://images.pokemontcg.io/sv3pt5/178_hires.png" }31  ]32} satisfies SetSummaryProps;33 34export function SetSummaryDemo() {35  return <SetSummary {...setSummary} />;36}

Usage

SetSummaryDemo.tsx

1import { SetSummary, type SetSummaryProps } from "@cardspark/ui/collecting";2 3const setSummary = {4  name: "Scarlet & Violet 151",5  code: "MEW",6  game: "Pokemon",7  series: "Scarlet & Violet",8  releaseDate: "Sep 22, 2023",9  mode: "master",10  owned: 178,11  total: 207,12  masterOwned: 228,13  masterTotal: 360,14  chaseCards: [15    { id: "mew-199", name: "Charizard ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/199_hires.png" },16    { id: "mew-198", name: "Venusaur ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/198_hires.png" },17    { id: "mew-200", name: "Blastoise ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/200_hires.png", owned: false },18    { id: "mew-201", name: "Alakazam ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/201_hires.png" },19    { id: "mew-202", name: "Zapdos ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/202_hires.png" },20    { id: "mew-203", name: "Erika's Invitation", imageUrl: "https://images.pokemontcg.io/sv3pt5/203_hires.png", owned: false },21    { id: "mew-204", name: "Giovanni's Charisma", imageUrl: "https://images.pokemontcg.io/sv3pt5/204_hires.png" }22  ],23  missingCards: [24    { id: "mew-167", name: "Ivysaur", imageUrl: "https://images.pokemontcg.io/sv3pt5/167_hires.png" },25    { id: "mew-169", name: "Charmeleon", imageUrl: "https://images.pokemontcg.io/sv3pt5/169_hires.png" },26    { id: "mew-171", name: "Wartortle", imageUrl: "https://images.pokemontcg.io/sv3pt5/171_hires.png" },27    { id: "mew-175", name: "Psyduck", imageUrl: "https://images.pokemontcg.io/sv3pt5/175_hires.png" },28    { id: "mew-176", name: "Poliwhirl", imageUrl: "https://images.pokemontcg.io/sv3pt5/176_hires.png" },29    { id: "mew-177", name: "Machoke", imageUrl: "https://images.pokemontcg.io/sv3pt5/177_hires.png" },30    { id: "mew-178", name: "Tangela", imageUrl: "https://images.pokemontcg.io/sv3pt5/178_hires.png" }31  ]32} satisfies SetSummaryProps;33 34export function SetSummaryDemo() {35  return <SetSummary {...setSummary} />;36}

Composition

Use SetSummary as the set-completion shell; pass set counts and preview-card arrays while the component handles the nested rails and thumbnail art.

1SetSummary2├── header3│   ├── set identity4│   ├── metadata / import state5│   └── active completion value6├── progress meter7├── metric cells8│   ├── cards count9│   ├── optional master count10│   ├── chase-card rail11│   │   └── small CardArt thumbnails12│   ├── missing-card rail13│   │   └── small CardArt thumbnails14│   └── complete collected-card rail15│       ├── value-sorted small CardArt thumbnails16│       └── adaptive +N count17├── importing rail18│   └── small CardArt thumbnails19└── optional breakdown rows20    └── RarityMark labels

Use `mode` only for standard versus master completion math. Use `chaseCards`, `missingCards`, `collectedCards`, and `importingCards` as rail data; those nested rails render compact CardArt previews and adaptive counts.

Features

Presents set completion through mode, owned, total, and label props for standard and master views.
Handles status plus importing and complete states through props rather than hard-coded examples.
Uses stable preview-card ids, forwards native article props and refs, and exposes the native click event.

Examples

Standard Progress

Use the default standard mode when the main bar should track ordinary set completion from `owned` and `total`; the layout still supports the same chase and missing rails as master progress.

Scarlet & Violet 151

86%

Pokemon • Scarlet & Violet • Sep 22, 2023

Cards: 178/207
Chase cards: 5/7
Missing: +22

1import { SetSummary } from "@cardspark/ui/collecting";2 3const chaseCards = [4  { id: "mew-199", name: "Charizard ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/199_hires.png" },5  { id: "mew-198", name: "Venusaur ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/198_hires.png" },6  { id: "mew-200", name: "Blastoise ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/200_hires.png", owned: false }7];8 9const missingCards = [10  { id: "mew-167", name: "Ivysaur", imageUrl: "https://images.pokemontcg.io/sv3pt5/167_hires.png" },11  { id: "mew-169", name: "Charmeleon", imageUrl: "https://images.pokemontcg.io/sv3pt5/169_hires.png" },12  { id: "mew-171", name: "Wartortle", imageUrl: "https://images.pokemontcg.io/sv3pt5/171_hires.png" }13];14 15export function StandardSetSummaryDemo() {16  return (17    <SetSummary18      name="Scarlet & Violet 151"19      game="Pokemon"20      series="Scarlet & Violet"21      releaseDate="Sep 22, 2023"22      owned={178}23      total={207}24      chaseCards={chaseCards}25      missingCards={missingCards}26    />27  );28}

Master Progress

Use `mode="master"` when the main bar should use master-set counts; the extra master metric appears when master counts are provided.

Scarlet & Violet 151

63%

Pokemon • Scarlet & Violet • Sep 22, 2023

Cards: 178/207
Master: 228/360
Chase cards: 5/7
Missing: +22

1import { SetSummary } from "@cardspark/ui/collecting";2 3const chaseCards = [4  { id: "mew-199", name: "Charizard ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/199_hires.png" },5  { id: "mew-198", name: "Venusaur ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/198_hires.png" },6  { id: "mew-200", name: "Blastoise ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/200_hires.png", owned: false }7];8 9export function MasterSetSummaryDemo() {10  return (11    <SetSummary12      name="Scarlet & Violet 151"13      game="Pokemon"14      series="Scarlet & Violet"15      releaseDate="Sep 22, 2023"16      mode="master"17      owned={178}18      total={207}19      masterOwned={228}20      masterTotal={360}21      chaseCards={chaseCards}22    />23  );24}

Importing State

Pass `importingCards` when an import or sync is in flight; the component swaps the stats grid for an importing rail.

Scarlet & Violet 151

Importing cards • 3/6

1import { SetSummary } from "@cardspark/ui/collecting";2 3const importingCards = [4  { id: "mew-001", name: "Bulbasaur", imageUrl: "https://images.pokemontcg.io/sv3pt5/1_hires.png" },5  { id: "mew-002", name: "Ivysaur", imageUrl: "https://images.pokemontcg.io/sv3pt5/2_hires.png" },6  { id: "mew-003", name: "Venusaur ex", imageUrl: "https://images.pokemontcg.io/sv3pt5/3_hires.png" }7];8 9export function ImportingSetSummaryDemo() {10  return (11    <SetSummary12      name="Scarlet & Violet 151"13      owned={0}14      total={165}15      importingCards={importingCards}16      importingCardsLoadedCount={2}17    />18  );19}

Loading, Empty, and Error

Use `status` for non-ready states while preserving the same shell and spacing.

Loading Set

Loading set summary

Empty Set

No set summary yet

Unavailable Set

Set summary unavailable

1import { SetSummary } from "@cardspark/ui/collecting";2 3export function SetSummaryStatusDemo() {4  return (5    <>6      <SetSummary name="Loading Set" status="loading" owned={0} total={165} />7      <SetSummary name="Empty Set" status="empty" owned={0} total={0} />8      <SetSummary name="Unavailable Set" status="error" owned={0} total={165} />9    </>10  );11}

Complete With Collected Rail

When a set is complete, pass collected cards to show the highest-value owned cards in a one-line rail with an adaptive `+N` count.

Scarlet & Violet 151

100%

Pokemon • Scarlet & Violet • Sep 22, 2023

+187

1import { SetSummary } from "@cardspark/ui/collecting";2 3const collectedCards = [4  { id: "mew-199", name: "Charizard ex", value: "$118.90", imageUrl: "https://images.pokemontcg.io/sv3pt5/199_hires.png" },5  { id: "mew-200", name: "Blastoise ex", value: "$57.80", imageUrl: "https://images.pokemontcg.io/sv3pt5/200_hires.png" },6  { id: "mew-198", name: "Venusaur ex", value: "$48.20", imageUrl: "https://images.pokemontcg.io/sv3pt5/198_hires.png" },7  { id: "mew-201", name: "Alakazam ex", value: "$37.40", imageUrl: "https://images.pokemontcg.io/sv3pt5/201_hires.png" },8  { id: "mew-202", name: "Zapdos ex", value: "$34.10", imageUrl: "https://images.pokemontcg.io/sv3pt5/202_hires.png" },9  { id: "mew-203", name: "Erika's Invitation", value: "$28.60", imageUrl: "https://images.pokemontcg.io/sv3pt5/203_hires.png" },10  { id: "mew-204", name: "Giovanni's Charisma", value: "$18.90", imageUrl: "https://images.pokemontcg.io/sv3pt5/204_hires.png" },11  { id: "mew-205", name: "Mew ex", value: "$16.50", imageUrl: "https://images.pokemontcg.io/sv3pt5/205_hires.png" },12  { id: "mew-173", name: "Pikachu", value: "$12.30", imageUrl: "https://images.pokemontcg.io/sv3pt5/173_hires.png" },13  { id: "mew-167", name: "Ivysaur", value: "$10.90", imageUrl: "https://images.pokemontcg.io/sv3pt5/167_hires.png" },14  { id: "mew-169", name: "Charmeleon", value: "$10.40", imageUrl: "https://images.pokemontcg.io/sv3pt5/169_hires.png" },15  { id: "mew-171", name: "Wartortle", value: "$9.80", imageUrl: "https://images.pokemontcg.io/sv3pt5/171_hires.png" }16];17 18export function CompleteSetSummaryDemo() {19  return (20    <SetSummary21      name="Scarlet & Violet 151"22      game="Pokemon"23      series="Scarlet & Violet"24      releaseDate="Sep 22, 2023"25      owned={207}26      total={207}27      collectedCards={collectedCards}28    />29  );30}

API Reference

Prop	Type	Default	Description
`name`	`string`	-	Primary display name.
`code`	`string`	-	Compact set, finish, or metadata code.
`game`	`string`	-	Game label shown in set metadata.
`series`	`string`	-	Series label used to format set metadata.
`releaseDate`	`string`	-	Formatted set release date.
`mode`	`"standard" \| "master"`	`"standard"`	Progress count used to calculate and present completion.
`status`	`"ready" \| "loading" \| "error" \| "empty"`	`"ready"`	Progress presentation state.
`owned`	`number`	-	Owned count used for progress calculation.
`total`	`number`	-	Total count used for progress calculation.
`masterOwned`	`number`	-	Owned master-set count used in master mode.
`masterTotal`	`number`	-	Total master-set count used in master mode.
`missingCards`	`SetSummaryPreviewCard[]`	`[]`	Stable-id preview cards used for missing-card progress states.
`chaseCards`	`SetSummaryChaseCard[]`	`[]`	Stable-id preview cards shown in the chase-card metric rail.
`collectedCards`	`SetSummaryPreviewCard[]`	`[]`	Stable-id collected cards shown in the complete-state rail, sorted by value or price.
`importingCards`	`SetSummaryPreviewCard[]`	`[]`	Stable-id preview cards shown while an import is in progress.
`importingCardsLoadedCount`	`number`	`0`	Number of importing preview cards already loaded.
`breakdown`	`SetSummaryBreakdownItem[]`	`[]`	Progress breakdown rows such as rarity, finish, or set subset counts.
`onClick`	`MouseEventHandler<HTMLElement>`	-	Optional native click handler that also enables keyboard activation where supported.