Examples
Each example is a whole component, running on this page and printed in full under it. They use only what the two packages export, so anything here can be pasted into an app that has them installed. Start with the one closest to what you are building and change it.
- Card huntThe whole hunt: a grid, a scan, five cards, the finds.
- Open from a buttonOne button, one card, the smallest thing that works.
- CollectionCards face down on a shelf that open where they lie.
The cards they deal
Every example deals from the same made-up set of ten creatures, drawn with the pixel glyphs that ship with the library. Swap in your own cards: a card is an id, a rarity, and whatever your face needs.
import { GLYPHS, type GlyphCard } from "@react-cards-opening/ui";
export const cards: GlyphCard[] = [
{ id: "moss-hedgehog", rarity: "common", name: "Moss Hedgehog", line: "Rolls into a ball at the first sign of a meeting.", art: GLYPHS.hedgehog },
{ id: "lantern-fox", rarity: "rare", name: "Lantern Fox", line: "Knows a shortcut. Will not say where it comes out.", art: GLYPHS.fox },
{ id: "ember-cat", rarity: "epic", name: "Ember Cat", line: "Sleeps on warm machines and wakes up when they fail.", art: GLYPHS.cat },
{ id: "tide-octopus", rarity: "rare", name: "Tide Octopus", line: "Eight arms, and one of them is always on the keyboard.", art: GLYPHS.octopus },
{ id: "vault-dragon", rarity: "legendary", name: "Vault Dragon", line: "Keeps one of every card ever dealt. This one is its own.", art: GLYPHS.dragon },
];