CARDSPARK_UI
Install

UI / Core

CardStack

Row stack container for composing multiple CardRow children without doubled borders.

Lugia V trading card

Lugia V

SITSilver Tempest#186#186SIRSIRSIRNMNM
$214.75
▲5.4%
M Venusaur EX trading card

M Venusaur EX

EVOXY - Evolutions#100#100URURURLPLP
$27.97
▲2.16%
Gengar VMAX trading card

Gengar VMAX

FSTFusion Strike#271#271SRSRSRNMNM
$191.20
▲12.6%
import { CardRow, CardStack } from "@cardspark/ui/core"; const cards = [  {    id: "sit-186",    name: "Lugia V",    set: "Silver Tempest",    setCode: "SIT",    number: "186/195",    rarity: "Special Illustration Rare",    condition: "Near Mint",    finish: "Holofoil",    marketValue: "$214.75",    delta: "+5.4%",    imageUrl: "https://images.pokemontcg.io/swsh12/186_hires.png"  },  {    id: "evo-100",    name: "M Venusaur EX",    set: "XY - Evolutions",    setCode: "EVO",    number: "100/108",    rarity: "Ultra Rare",    condition: "Lightly Played",    finish: "Holofoil",    marketValue: "$27.97",    delta: "+2.16%",    imageUrl: "https://images.pokemontcg.io/xy12/100_hires.png"  },  {    id: "fst-271",    name: "Gengar VMAX",    set: "Fusion Strike",    setCode: "FST",    number: "271/264",    rarity: "Secret Rare",    condition: "Near Mint",    marketValue: "$191.20",    delta: "+12.6%",    imageUrl: "https://images.pokemontcg.io/swsh8/271_hires.png"  }]; export function CardStackDemo() {  return (    <CardStack>      {cards.map((card) => (        <CardRow          key={card.id}          format="market"          card={card}        />      ))}    </CardStack>  );}

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

CardStackDemo.tsx
import { CardRow, CardStack } from "@cardspark/ui/core"; const cards = [  {    id: "sit-186",    name: "Lugia V",    set: "Silver Tempest",    setCode: "SIT",    number: "186/195",    rarity: "Special Illustration Rare",    condition: "Near Mint",    finish: "Holofoil",    marketValue: "$214.75",    delta: "+5.4%",    imageUrl: "https://images.pokemontcg.io/swsh12/186_hires.png"  },  {    id: "evo-100",    name: "M Venusaur EX",    set: "XY - Evolutions",    setCode: "EVO",    number: "100/108",    rarity: "Ultra Rare",    condition: "Lightly Played",    finish: "Holofoil",    marketValue: "$27.97",    delta: "+2.16%",    imageUrl: "https://images.pokemontcg.io/xy12/100_hires.png"  },  {    id: "fst-271",    name: "Gengar VMAX",    set: "Fusion Strike",    setCode: "FST",    number: "271/264",    rarity: "Secret Rare",    condition: "Near Mint",    marketValue: "$191.20",    delta: "+12.6%",    imageUrl: "https://images.pokemontcg.io/swsh8/271_hires.png"  }]; export function CardStackDemo() {  return (    <CardStack>      {cards.map((card) => (        <CardRow          key={card.id}          format="market"          card={card}        />      ))}    </CardStack>  );}

Usage

CardStackDemo.tsx
import { CardRow, CardStack } from "@cardspark/ui/core"; const cards = [  {    id: "sit-186",    name: "Lugia V",    set: "Silver Tempest",    setCode: "SIT",    number: "186/195",    rarity: "Special Illustration Rare",    condition: "Near Mint",    finish: "Holofoil",    marketValue: "$214.75",    delta: "+5.4%",    imageUrl: "https://images.pokemontcg.io/swsh12/186_hires.png"  },  {    id: "evo-100",    name: "M Venusaur EX",    set: "XY - Evolutions",    setCode: "EVO",    number: "100/108",    rarity: "Ultra Rare",    condition: "Lightly Played",    finish: "Holofoil",    marketValue: "$27.97",    delta: "+2.16%",    imageUrl: "https://images.pokemontcg.io/xy12/100_hires.png"  },  {    id: "fst-271",    name: "Gengar VMAX",    set: "Fusion Strike",    setCode: "FST",    number: "271/264",    rarity: "Secret Rare",    condition: "Near Mint",    marketValue: "$191.20",    delta: "+12.6%",    imageUrl: "https://images.pokemontcg.io/swsh8/271_hires.png"  }]; export function CardStackDemo() {  return (    <CardStack>      {cards.map((card) => (        <CardRow          key={card.id}          format="market"          card={card}        />      ))}    </CardStack>  );}

Composition

Use CardStack as the row-list composite above CardRow.

CardStack├── CardRow│   ├── CardArt thumbnail│   ├── CardBadgeStack│   └── value / chart / movement├── CardRow└── CardRow

Keep filtering, sorting, loading, and empty states in the parent surface.

Features

  • Composes multiple CardRow children as one framed row group.
  • Keeps the first row's top border and following row borders from doubling up.
  • Passes div attributes such as className through for section-level layout.

API Reference

PropTypeDefaultDescription
childrenReactNode-CardRow children to arrange in one continuous stack.
classNamestring-Optional class name for layout overrides.