Docs Components CardCase CardCase CardCase is a chest of cards. It stirs while it waits. Opened, it shakes, the lid lifts, light and sparks pour out, and the cards come out of it one after another, each through the reveal , each landing on its place on the shelf below. The plate on the front and the light inside take the colour of whatever is coming out next.
5 cards are in this case.
Open it and they come out one after another.
Open the case
Moss Hedgehog
Common
Rolls into a ball at the first sign of a meeting.
Night Owl
Uncommon
Sees everything you shipped after midnight.
Tide Octopus
Rare
Eight arms, and one of them is always on the keyboard.
Ember Cat
Epic
Sleeps on warm machines and wakes up when they fail.
Ash Phoenix
Mythic
Burns down once a century and starts again from the first line.
Press the case, or the button. Take all skips the show.
tsx Copy import { useOpenedCards } from "@react-cards-opening/core" ;
import { CardCase, GLYPHS } from "@react-cards-opening/ui" ;
function Chest ({ cards }) {
const { opened, open } = useOpenedCards ("chest:42" );
return <CardCase cards={cards} opened={opened} onOpen={open} emblem={GLYPHS.crown} /> ;
}Prop Type What it does cardsreadonly C[]What is in the case, in the order it comes out. openedreadonly string[]Ids already out of the case. onOpen(id: string) => voidA card was turned face up for the first time. theme?CardThemeThe colours. moss in the dark when left out. rarities?readonly RarityTier[]Your tiers. The six defaults when left out. emblem?PixelArtThe glyph on the front of the case. actions?ReactNodeExtra buttons in the header, next to the open button. onRunChange?(running: boolean) => voidThe case started giving up its cards, or came to rest. labels?Partial<CardCaseLabels>Every word in the panel. landing?(card) => HTMLElement | nullWhere a card lands, instead of its place on the shelf here. renderFace?(card, info) => ReactNodeThe front of the card, instead of the ready-made face. renderBack?(card) => ReactNodeThe back of the card. readingOf?(card, info) => readonly string[]The text on a face of your own, so the card stays up long enough to read. effects?EffectPlan | falseWhat each tier plays on top of the card's own reveal. The signature shows when left out, false for none. className?stringA class for the panel. classNames?CardCaseClassNamesA class of your own for each part: the panel's, the case's, the shelf's and the reveal's. style?CSSPropertiesInline styles for the panel.
The box is its own component. LootCase draws the case and, through its handle, opens it: open plays the lid and the light and hands back what launch on CardOpening takes, so a card comes out of the gap under the lid. close puts the lid back.
tsx Copy import { CardOpening, LootCase, type LootCaseHandle } from "@react-cards-opening/ui" ;
const chest = useRef<LootCaseHandle > (null );
<LootCase handle={chest} tone={toneOfNextCard} onPress={() => hunt.start ()} />
<CardOpening opening={hunt.opening} launch={(card, show) => chest.current?.open (show) ?? null } /> Prop Type What it does theme?CardThemeThe colours. tone?stringThe colour of the plate and of the light inside: the tier of what comes out next. emblem?PixelArtThe glyph on the front. idle?booleanStirs now and then while shut. On when left out. onPress?() => voidMakes the whole case a button. disabled?booleanThe case cannot be pressed. label?stringWhat a screen reader calls the press. shortcut?booleanThe press repeats a button next to the case: keep it for the pointer and out of the tab order. handle?Ref<LootCaseHandle>open(show, { flash }) and close().className?stringA class for the case's root. classNames?LootCaseClassNamesA class of your own for each part of the case. style?CSSPropertiesInline styles for the root: the place for --rco-case-size.
Key The library's class The part case.rco-caseThe case's root. className on a LootCase used alone. box.rco-case-boxThe lid and the body together: what shakes. lid.rco-case-lidThe lid. body.rco-case-bodyThe body, with the emblem on it. latch.rco-case-latchThe plate on the front. It wears the colour of what comes out next. glow.rco-case-glowThe light that pours out of the open case. caseRays.rco-case-raysThe wheel of rays behind an open case. caseBit.rco-case-bitEach spark thrown as the lid lifts.
Key The library's class The part shelf.rco-shelfThe row of places under the case. slot.rco-shelf-slotEach place: a button holding the card that lands there.
Key The library's class The part root.rco-panelThe panel. The same as className. flash.rco-panel-flashThe flash over the whole panel on a loud card. head.rco-panel-headThe row that holds the words and the buttons. headline.rco-panel-headlineThe headline. subline.rco-panel-sublineThe line under it. actions.rco-panel-actionsThe buttons' row. mainButton.rco-button-mainThe main button: Spin, or Open the case. sideButton.rco-button-skipTake all during a run, and the replay button after it. finds.rco-findsThe list of badges. badge.rco-badgeEach badge, won or not. A won one is a button. badgeArt.rco-badge-artThe little glyph's box in a badge. badgeName.rco-badge-nameThe card's name in a badge. badgeWhere.rco-badge-whereThe second line of a badge.
Variable What it sets When left out --rco-case-sizeThe case's width. Everything on it scales with this. 220px
Last updated 2026-10-11 . Read this page as Markdown .