CARDSPARK_UI
Install

UI / Core

CardBadgeStack

Inline metadata stack for consistent spacing and tooltip behavior.

SV151#173IRIR(LP)
import { CardBadge, CardBadgeStack } from "@cardspark/ui/core"; const card = {  set: "Scarlet & Violet 151",  number: "173/165",  rarity: "Illustration Rare",  condition: "Lightly Played"}; export function CardBadgeStackDemo() {  return (    <CardBadgeStack>      <CardBadge type="set" card={card} />      <CardBadge type="number" card={card} />      <CardBadge type="rarity" card={card} display="mark-code" />      <span>(<CardBadge type="condition" card={card} />)</span>    </CardBadgeStack>  );}

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

CardBadgeStackDemo.tsx
import { CardBadge, CardBadgeStack } from "@cardspark/ui/core"; const card = {  set: "Scarlet & Violet 151",  number: "173/165",  rarity: "Illustration Rare",  condition: "Lightly Played"}; export function CardBadgeStackDemo() {  return (    <CardBadgeStack>      <CardBadge type="set" card={card} />      <CardBadge type="number" card={card} />      <CardBadge type="rarity" card={card} display="mark-code" />      <span>(<CardBadge type="condition" card={card} />)</span>    </CardBadgeStack>  );}

Usage

CardBadgeStackDemo.tsx
import { CardBadge, CardBadgeStack } from "@cardspark/ui/core"; const card = {  set: "Scarlet & Violet 151",  number: "173/165",  rarity: "Illustration Rare",  condition: "Lightly Played"}; export function CardBadgeStackDemo() {  return (    <CardBadgeStack>      <CardBadge type="set" card={card} />      <CardBadge type="number" card={card} />      <CardBadge type="rarity" card={card} display="mark-code" />      <span>(<CardBadge type="condition" card={card} />)</span>    </CardBadgeStack>  );}

Composition

Use CardBadgeStack as the wrapper around compact metadata badge runs.

MetadataRun└── CardBadgeStack    ├── CardBadge type="set"    ├── CardBadge type="number"    ├── CardBadge type="rarity"    └── CardBadge type="condition"

Let each CardBadge own its tooltip and compact/full display behavior.

Features

  • Accepts badge children and spaces set, number, rarity, condition, finish, and language metadata as one inline run.
  • Preserves each child CardBadge tooltip and compact/full display behavior instead of remapping it.
  • Passes span attributes such as className through for placement inside rows, tiles, and detail headers.

API Reference

PropTypeDefaultDescription
childrenReactNode-Child content rendered inside the component.
classNamestring-Optional class name appended to the component root.