UI / Layouts

CardDetail

Composable card detail experience with independently optional facts, collection state, and market history.

XY - Evolutions#100/108URUltra RareEnglishEVO#100URUREN

M Venusaur EX

Market Price

▲2.16%today

Your collection

Lightly Played
Jun 18, 2026$24.00
EVOXY - Evolutions#100#100URURURLPLP
$27.97
▲16.5%

Details

Type: Grass
HP: 230
Stage: Mega
Card text: When 1 of your Pokemon becomes a Mega Evolution Pokemon, your turn ends.
Your opponent's Active Pokemon is now Paralyzed and Poisoned.
Attack: Crisis Vine - 120. Your opponent's Active Pokemon is now Paralyzed and Poisoned.
Weakness

1"use client";2 3import { useState } from "react";4import { CardDetail, type CardDetailFact } from "@cardspark/ui/layouts";5 6const card = {7  id: "evo-100",8  name: "M Venusaur EX",9  set: "XY - Evolutions",10  setCode: "EVO",11  number: "100/108",12  rarity: "Ultra Rare",13  language: "EN",14  imageUrl: "https://images.pokemontcg.io/xy12/100_hires.png",15  hp: "230",16  type: "Grass",17  stage: "Mega"18};19 20const facts: CardDetailFact[] = [21  { kind: "type", value: "Grass" },22  { kind: "text", label: "HP", value: "230" },23  { kind: "text", label: "Attack", value: "Crisis Vine - 120. Your opponent's Active Pokemon is now Paralyzed and Poisoned." },24  { kind: "weakness", value: "Fire x2" }25];26 27const collection = {28  actionLabel: "Add to collection",29  items: [30    { id: "evo-100-lp", name: "Lightly Played", set: "XY - Evolutions", setCode: "EVO", number: "100/108", rarity: "Ultra Rare", condition: "Lightly Played", value: "$27.97", imageUrl: card.imageUrl }31  ]32};33 34const market = {35  label: "Market price",36  price: "$27.97",37  deltaToday: "+2.16%"38};39 40const history = {41  values: [26.55, 27.1, 26.82, 27.32, 27.05, 27.74, 27.97],42  baselineValue: 27.38,43  range: "1D",44  ranges: ["1D", "1W", "1M", "1Y", "ALL"]45};46 47export function CardDetailDemo() {48  const variants = ["Normal", "Holofoil", "Reverse Holofoil"];49  const conditions = ["Near Mint", "Lightly Played", "Moderately Played"];50  const dataSources = ["All", "Raw", "TCGplayer", "eBay"];51  const graders = ["Ungraded", "PSA", "CGC"];52  const grades = ["10", "9", "8"];53  const [activeVariant, setActiveVariant] = useState("Holofoil");54  const [activeCondition, setActiveCondition] = useState("Lightly Played");55  const [activeDataSource, setActiveDataSource] = useState("All");56  const [activeGrader, setActiveGrader] = useState("Ungraded");57  const [activeGrade, setActiveGrade] = useState("10");58  const [activeRange, setActiveRange] = useState("1D");59  const [isOwned, setIsOwned] = useState(false);60 61  return (62    <CardDetail63      card={card}64      facts={facts}65      variants={variants}66      activeVariant={activeVariant}67      conditions={conditions}68      activeCondition={activeCondition}69      dataSources={dataSources}70      activeDataSource={activeDataSource}71      graders={graders}72      activeGrader={activeGrader}73      grades={grades}74      activeGrade={activeGrade}75      collection={{76        ...collection,77        actionLabel: isOwned ? "In collection" : collection.actionLabel,78        items: isOwned ? collection.items : []79      }}80      market={market}81      history={{ ...history, range: activeRange }}82      onCollectionAction={() => setIsOwned(true)}83      onConditionChange={setActiveCondition}84      onDataSourceChange={setActiveDataSource}85      onGraderChange={setActiveGrader}86      onGradeChange={setActiveGrade}87      onVariantChange={setActiveVariant}88      onRangeChange={setActiveRange}89    />90  );91}

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 CardDetail from its package entry point.

CardDetailDemo.tsx

1"use client";2 3import { useState } from "react";4import { CardDetail, type CardDetailFact } from "@cardspark/ui/layouts";5 6const card = {7  id: "evo-100",8  name: "M Venusaur EX",9  set: "XY - Evolutions",10  setCode: "EVO",11  number: "100/108",12  rarity: "Ultra Rare",13  language: "EN",14  imageUrl: "https://images.pokemontcg.io/xy12/100_hires.png",15  hp: "230",16  type: "Grass",17  stage: "Mega"18};19 20const facts: CardDetailFact[] = [21  { kind: "type", value: "Grass" },22  { kind: "text", label: "HP", value: "230" },23  { kind: "text", label: "Attack", value: "Crisis Vine - 120. Your opponent's Active Pokemon is now Paralyzed and Poisoned." },24  { kind: "weakness", value: "Fire x2" }25];26 27const collection = {28  actionLabel: "Add to collection",29  items: [30    { id: "evo-100-lp", name: "Lightly Played", set: "XY - Evolutions", setCode: "EVO", number: "100/108", rarity: "Ultra Rare", condition: "Lightly Played", value: "$27.97", imageUrl: card.imageUrl }31  ]32};33 34const market = {35  label: "Market price",36  price: "$27.97",37  deltaToday: "+2.16%"38};39 40const history = {41  values: [26.55, 27.1, 26.82, 27.32, 27.05, 27.74, 27.97],42  baselineValue: 27.38,43  range: "1D",44  ranges: ["1D", "1W", "1M", "1Y", "ALL"]45};46 47export function CardDetailDemo() {48  const variants = ["Normal", "Holofoil", "Reverse Holofoil"];49  const conditions = ["Near Mint", "Lightly Played", "Moderately Played"];50  const dataSources = ["All", "Raw", "TCGplayer", "eBay"];51  const graders = ["Ungraded", "PSA", "CGC"];52  const grades = ["10", "9", "8"];53  const [activeVariant, setActiveVariant] = useState("Holofoil");54  const [activeCondition, setActiveCondition] = useState("Lightly Played");55  const [activeDataSource, setActiveDataSource] = useState("All");56  const [activeGrader, setActiveGrader] = useState("Ungraded");57  const [activeGrade, setActiveGrade] = useState("10");58  const [activeRange, setActiveRange] = useState("1D");59  const [isOwned, setIsOwned] = useState(false);60 61  return (62    <CardDetail63      card={card}64      facts={facts}65      variants={variants}66      activeVariant={activeVariant}67      conditions={conditions}68      activeCondition={activeCondition}69      dataSources={dataSources}70      activeDataSource={activeDataSource}71      graders={graders}72      activeGrader={activeGrader}73      grades={grades}74      activeGrade={activeGrade}75      collection={{76        ...collection,77        actionLabel: isOwned ? "In collection" : collection.actionLabel,78        items: isOwned ? collection.items : []79      }}80      market={market}81      history={{ ...history, range: activeRange }}82      onCollectionAction={() => setIsOwned(true)}83      onConditionChange={setActiveCondition}84      onDataSourceChange={setActiveDataSource}85      onGraderChange={setActiveGrader}86      onGradeChange={setActiveGrade}87      onVariantChange={setActiveVariant}88      onRangeChange={setActiveRange}89    />90  );91}

Usage

CardDetailDemo.tsx

1"use client";2 3import { useState } from "react";4import { CardDetail, type CardDetailFact } from "@cardspark/ui/layouts";5 6const card = {7  id: "evo-100",8  name: "M Venusaur EX",9  set: "XY - Evolutions",10  setCode: "EVO",11  number: "100/108",12  rarity: "Ultra Rare",13  language: "EN",14  imageUrl: "https://images.pokemontcg.io/xy12/100_hires.png",15  hp: "230",16  type: "Grass",17  stage: "Mega"18};19 20const facts: CardDetailFact[] = [21  { kind: "type", value: "Grass" },22  { kind: "text", label: "HP", value: "230" },23  { kind: "text", label: "Attack", value: "Crisis Vine - 120. Your opponent's Active Pokemon is now Paralyzed and Poisoned." },24  { kind: "weakness", value: "Fire x2" }25];26 27const collection = {28  actionLabel: "Add to collection",29  items: [30    { id: "evo-100-lp", name: "Lightly Played", set: "XY - Evolutions", setCode: "EVO", number: "100/108", rarity: "Ultra Rare", condition: "Lightly Played", value: "$27.97", imageUrl: card.imageUrl }31  ]32};33 34const market = {35  label: "Market price",36  price: "$27.97",37  deltaToday: "+2.16%"38};39 40const history = {41  values: [26.55, 27.1, 26.82, 27.32, 27.05, 27.74, 27.97],42  baselineValue: 27.38,43  range: "1D",44  ranges: ["1D", "1W", "1M", "1Y", "ALL"]45};46 47export function CardDetailDemo() {48  const variants = ["Normal", "Holofoil", "Reverse Holofoil"];49  const conditions = ["Near Mint", "Lightly Played", "Moderately Played"];50  const dataSources = ["All", "Raw", "TCGplayer", "eBay"];51  const graders = ["Ungraded", "PSA", "CGC"];52  const grades = ["10", "9", "8"];53  const [activeVariant, setActiveVariant] = useState("Holofoil");54  const [activeCondition, setActiveCondition] = useState("Lightly Played");55  const [activeDataSource, setActiveDataSource] = useState("All");56  const [activeGrader, setActiveGrader] = useState("Ungraded");57  const [activeGrade, setActiveGrade] = useState("10");58  const [activeRange, setActiveRange] = useState("1D");59  const [isOwned, setIsOwned] = useState(false);60 61  return (62    <CardDetail63      card={card}64      facts={facts}65      variants={variants}66      activeVariant={activeVariant}67      conditions={conditions}68      activeCondition={activeCondition}69      dataSources={dataSources}70      activeDataSource={activeDataSource}71      graders={graders}72      activeGrader={activeGrader}73      grades={grades}74      activeGrade={activeGrade}75      collection={{76        ...collection,77        actionLabel: isOwned ? "In collection" : collection.actionLabel,78        items: isOwned ? collection.items : []79      }}80      market={market}81      history={{ ...history, range: activeRange }}82      onCollectionAction={() => setIsOwned(true)}83      onConditionChange={setActiveCondition}84      onDataSourceChange={setActiveDataSource}85      onGraderChange={setActiveGrader}86      onGradeChange={setActiveGrade}87      onVariantChange={setActiveVariant}88      onRangeChange={setActiveRange}89    />90  );91}

Composition

Use CardDetail for a focused card surface, supplying only the facts, collection, and market-history sections the page has.

1CardDetailPage2└── CardDetail3    ├── card identity and artwork4    ├── variant, condition, source, grader, and grade controls5    ├── optional collection state and owned rows6    ├── optional structured facts and rules text7    └── optional market summary and price history

Pass `market` and `history` together to render price history. Type, weakness, and rules facts use explicit `kind` values; other facts use `kind="text"`.

Features

Composes canonical card data with independently optional collection, market plus history, and structured facts sections.
Keeps grader and grade state separate while hiding condition or grade controls when they do not apply.
Forwards native article props and refs and exposes focused callbacks for each controlled selection.

API Reference

Prop	Type	Default	Description
`card`	`CardDetailCard`	-	Canonical card requiring stable `id`, `name`, `set`, `number`, and `rarity` fields.
`facts`	`CardDetailFact[]`	`[]`	Structured text, type, weakness, and rules facts rendered when supplied.
`variants`	`string[]`	-	Variant options available to the detail controls.
`activeVariant`	`string`	-	Currently selected card variant.
`conditions`	`string[]`	-	Condition options available to the detail controls.
`activeCondition`	`string`	-	Currently selected condition value.
`grades`	`string[]`	`[]`	Grade options available when a graded grader is active.
`activeGrade`	`string`	-	Currently selected numeric or named grade.
`dataSources`	`string[]`	-	Data source options available to the detail controls.
`activeDataSource`	`string`	-	Currently selected data source value.
`graders`	`string[]`	-	Grader options available to the detail controls.
`activeGrader`	`string`	-	Currently selected grader value.
`collection`	`CardDetailCollection`	-	Optional collection action and stable-id owned-copy rows.
`market`	`CardDetailMarketSummary`	-	Formatted market summary. Rendered with price history only when `history` is also supplied.
`history`	`CardDetailHistory`	-	Optional chart values, ranges, and dimension-specific data sets; rendered when `market` is also supplied.
`onCollectionAction`	`(event: MouseEvent<HTMLElement>) => void`	-	Callback fired with the native event when the primary collection action is activated.
`onConditionChange`	`(condition: string) => void`	-	Callback fired when the active condition changes.
`onGradeChange`	`(grade: string) => void`	-	Callback fired when the active grade changes.
`onDataSourceChange`	`(dataSource: string) => void`	-	Callback fired when the active market data source changes.
`onGraderChange`	`(grader: string) => void`	-	Callback fired when the active grader changes.
`onVariantChange`	`(variant: string) => void`	-	Callback fired when the active variant changes.
`onRangeChange`	`(range: string) => void`	-	Callback fired when a chart range changes.