CARDSPARK_UI
Install

UI / Core

RarityMark

Rarity icon primitive used by badges and metadata rows.

CCommonUUncommonRRareRHRare HoloDRDouble RareURUltra RareIRIllustration RareSIRSpecial Illustration RareHRHyper RareSRSecret RareACEACE SPEC RareSRShiny RareSHURShiny Ultra RareRRRadiant RareARAmazing RareRPSRare Prism StarTGRHTrainer Gallery Rare HoloMHRMega Hyper Rare
import { RarityMark } from "@cardspark/ui/core"; const rarities = [  "Common",  "Uncommon",  "Rare",  "Rare Holo",  "Double Rare",  "Ultra Rare",  "Illustration Rare",  "Special Illustration Rare",  "Hyper Rare",  "Secret Rare",  "ACE SPEC Rare",  "Shiny Rare",  "Shiny Ultra Rare",  "Radiant Rare",  "Amazing Rare",  "Rare Prism Star",  "Trainer Gallery Rare Holo",  "Mega Hyper Rare"]; export function RarityMarkDemo() {  return (    <div className="rarity-mark-grid">      {rarities.map((rarity) => (        <span key={rarity} className="rarity-mark-item">          <RarityMark rarity={rarity} />          <span>{rarity}</span>        </span>      ))}    </div>  );}

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

RarityMarkDemo.tsx
import { RarityMark } from "@cardspark/ui/core"; const rarities = [  "Common",  "Uncommon",  "Rare",  "Rare Holo",  "Double Rare",  "Ultra Rare",  "Illustration Rare",  "Special Illustration Rare",  "Hyper Rare",  "Secret Rare",  "ACE SPEC Rare",  "Shiny Rare",  "Shiny Ultra Rare",  "Radiant Rare",  "Amazing Rare",  "Rare Prism Star",  "Trainer Gallery Rare Holo",  "Mega Hyper Rare"]; export function RarityMarkDemo() {  return (    <div className="rarity-mark-grid">      {rarities.map((rarity) => (        <span key={rarity} className="rarity-mark-item">          <RarityMark rarity={rarity} />          <span>{rarity}</span>        </span>      ))}    </div>  );}

Usage

RarityMarkDemo.tsx
import { RarityMark } from "@cardspark/ui/core"; const rarities = [  "Common",  "Uncommon",  "Rare",  "Rare Holo",  "Double Rare",  "Ultra Rare",  "Illustration Rare",  "Special Illustration Rare",  "Hyper Rare",  "Secret Rare",  "ACE SPEC Rare",  "Shiny Rare",  "Shiny Ultra Rare",  "Radiant Rare",  "Amazing Rare",  "Rare Prism Star",  "Trainer Gallery Rare Holo",  "Mega Hyper Rare"]; export function RarityMarkDemo() {  return (    <div className="rarity-mark-grid">      {rarities.map((rarity) => (        <span key={rarity} className="rarity-mark-item">          <RarityMark rarity={rarity} />          <span>{rarity}</span>        </span>      ))}    </div>  );}

Composition

Use RarityMark as the public rarity symbol primitive when a surface needs the mark outside CardBadge.

CustomMetadata└── RarityMark    ├── rarity    └── optional tooltip

Prefer CardBadge type="rarity" when the rarity mark is part of a normal metadata run.

Features

  • Renders the standalone rarity symbol primitive used by badges and set summary breakdowns.
  • Uses variant to resolve rarity assets and falls back to a generated acronym when needed.
  • Lets tooltip={false} turn off tooltip wrapping when the mark sits inside a larger labelled control.

API Reference

PropTypeDefaultDescription
raritystring-Rarity label for card metadata.
tooltipbooleantrueControls whether compact metadata renders a tooltip.
variant"pokemon""pokemon"TCG variant used for resource or rarity asset lookup.
classNamestring-Optional class name appended to the component root.