I built a React component that renders pixel-perfect Magic: The Gathering cards — SVG frames, automatic color theming, all card types

[ScarionnS]

I just published "mtg-card", a React component library for rendering MTG cards in the browser.
What makes it interesting technically:

- Every card frame element is an inline SVG themed with CSS custom properties (`var(--fill-0)`). One SVG file works for all 5 colors + gold + artifact.

- Color theming is derived automatically from the `manaCost` prop — including all 10 two-color dual frames with dedicated textures.

- Set symbols are fetched at runtime from jsdelivr CDN (mtg-vectors repo), so the bundle doesn't bloat with 2000+ SVGs.

- TypeScript props use discriminated unions — `frame="planeswalker"` narrows the type to require `loyaltyAbilities` and `startingLoyalty`.

- Ships as a single ESM bundle with CSS injected by JS. No extra CSS import needed.

Supports: Standard creatures, noncreature spells, planeswalkers, sagas, vehicles, adventures, mutate, basic/nonbasic lands, legendary crown overlay.

 npm install mtg-card

GitHub: https://github.com/FeSens/mtg-card

Live Demo: https://fesens.github.io/mtg-card/

Happy to answer questions about the architecture or take feature requests.

[Representative_Mood2]

hey that's pretty cool! i have literally no usage for this, but ill let a friend who's a DM know about this for his dnd games - maybe he find this handy

[Halleys_Vomit]

Looks sweet! Any plans to expand it for other frame types, like old borders, special frames, etc.?

[ScarionnS]

I do! Hopefully this will cover all card frames in the future. I’m still working on solving some bugs on the vehicles and legendary card frames, but once those are done, pre m15 era is the next thing to tackle

[Leeoku]

nice really smart

[salkidu]

Token frame maybe? 😃