CARDSPARK_UI
Install

UI / Core

CardTile

Collectible card tile with market and collection formats, compact metadata, value, and movement.

M Venusaur EX card

M Venusaur EX

$27.97

EVO#100UR(LP)

▲2.16%
import { CardTile } from "@cardspark/ui/core"; const card = {  id: "evo-100",  name: "M Venusaur EX",  set: "XY - Evolutions",  setCode: "EVO",  number: "100/108",  rarity: "Ultra Rare",  condition: "Lightly Played",  marketValue: "$27.97",  delta: "+2.16%",  imageUrl: "https://images.pokemontcg.io/xy12/100_hires.png"}; export function CardTileMarketFormatDemo() {  return <CardTile format="market" card={card} tone="neutral" />;}

Installation

Install the package.

npm install @cardspark/ui

Import the shared stylesheet layer near your app root.

app/layout.tsx
import "@cardspark/ui/tokens.css";import "@cardspark/ui/themes/basement.css";import "@cardspark/ui/styles.css";

Import and render CardTile from its package entry point.

CardTileDemo.tsx
import { CardTile } from "@cardspark/ui/core"; const card = {  id: "evo-100",  name: "M Venusaur EX",  set: "XY - Evolutions",  setCode: "EVO",  number: "100/108",  rarity: "Ultra Rare",  condition: "Lightly Played",  marketValue: "$27.97",  delta: "+2.16%",  imageUrl: "https://images.pokemontcg.io/xy12/100_hires.png"}; export function CardTileMarketFormatDemo() {  return <CardTile format="market" card={card} tone="neutral" />;}

Usage

CardTileDemo.tsx
import { CardTile } from "@cardspark/ui/core"; const card = {  id: "evo-100",  name: "M Venusaur EX",  set: "XY - Evolutions",  setCode: "EVO",  number: "100/108",  rarity: "Ultra Rare",  condition: "Lightly Played",  marketValue: "$27.97",  delta: "+2.16%",  imageUrl: "https://images.pokemontcg.io/xy12/100_hires.png"}; export function CardTileMarketFormatDemo() {  return <CardTile format="market" card={card} tone="neutral" />;}

Composition

Use CardTile as the repeated child inside CardGrid or another card-shaped collection surface.

CardGrid└── CardTile    ├── CardArt    ├── title and value    ├── CardBadgeStack    │   └── CardBadge set / number / rarity / condition    └── movement

CardTile renders the main value and movement directly from card data.

Features

  • Maps card, format, and explicit overrides into the standard CardGrid child footer.
  • Uses format="market" or format="collection" to choose market value, collection value, and ownership display semantics.
  • Forwards its ref, native article props, and click event while imageUrl, imageAlt, and tone configure artwork treatment.

Examples

Market Format

Use `format="market"` for gallery cards that show current market value and movement from card data.

M Venusaur EX trading card

M Venusaur EX

$27.97

EVO#100UR(LP)

▲2.16%
import { CardTile } from "@cardspark/ui/core"; const card = {  id: "evo-100",  name: "M Venusaur EX",  set: "XY - Evolutions",  setCode: "EVO",  number: "100/108",  rarity: "Ultra Rare",  condition: "Lightly Played",  marketValue: "$27.97",  delta: "+2.16%",  imageUrl: "https://images.pokemontcg.io/xy12/100_hires.png"}; export function CardTileMarketFormatDemo() {  return <CardTile format="market" card={card} tone="neutral" />;}

Collection Format

Use `format="collection"` for owned-card gallery cards that show collection value and ownership context.

M Venusaur EX trading card

M Venusaur EX

$35.80

EVO#100UR(NM)

▲13.7%
import { CardTile } from "@cardspark/ui/core"; const card = {  id: "evo-100",  name: "M Venusaur EX",  set: "XY - Evolutions",  setCode: "EVO",  number: "100/108",  rarity: "Ultra Rare",  condition: "Near Mint",  collectionValue: "$35.80",  costBasis: "$31.50",  delta: "+13.7%",  imageUrl: "https://images.pokemontcg.io/xy12/100_hires.png"}; export function CardTileCollectionFormatDemo() {  return <CardTile format="collection" card={card} tone="neutral" />;}

API Reference

PropTypeDefaultDescription
format"market" | "collection""market"Selects which card value fields and display semantics to use.
cardTradingCardData-Canonical card object. Requires stable `id` and `name`; other presentation fields are optional.
name, set, setCode, number, rarity, conditionstring-Explicit identity props. These override fields from `card`.
valuestring-Formatted card value. Overrides `card.marketValue`, `card.collectionValue`, or `card.value`.
deltastring-Formatted value movement.
deltaPeriodstring-Delta tooltip period.
imageUrlstring-Card art URL. Overrides `card.imageUrl`.
imageAltstring-Accessible image description. Overrides `card.imageAlt`.
tone"fire" | "electric" | "water" | "neutral""neutral"Fallback and glow color treatment.
onClick(event: MouseEvent<HTMLElement>) => void-Native click event handler; also enables keyboard activation.
ariaLabelstring-Accessible label for the interactive tile.