Styling by hand

The look that ships is a default, not a wall. Every part of every component takes a class of your own through classNames, and every rule in the library's stylesheet weighs exactly one class, so yours wins without !important. With Tailwind it takes one line of setup, and then utilities work on any part.

With Tailwind 4

Import the library's stylesheet into the components layer. That puts it above Tailwind's reset, so the reset cannot flatten it, and below your utilities, so a utility always wins.

@import "tailwindcss";
@import "@react-cards-opening/ui/styles.css" layer(components);

<CardHunt
  classNames={{
    root: "rounded-none bg-zinc-950 p-10",
    headline: "font-serif text-5xl",
    scanButton: "rounded-md bg-pink-500 px-8 text-white",
    cell: "rounded-none",
    badge: "rounded-md",
    face: "rounded-xl p-4",
  }}
  {...rest}
/>

With plain CSS

The rco- class on each part is a stable name, and every rule on it weighs one class. Two ways to win follow from that. A rule of yours with a parent in front of it always wins. A single class of yours wins when your stylesheet loads after the library's.

/* Always wins: two classes against one. */
.my-hunt .rco-hunt-headline {
  font-family: Georgia, serif;
}

/* Wins when it comes later: one class against one. Hand it over with classNames. */
.headline {
  font-size: 40px;
}

import styles from "./hunt.module.css";

<CardHunt className="my-hunt" classNames={{ headline: styles.headline }} {...rest} />

Variables for the usual things

Corners, gaps and the dimmed page are variables, so the common changes need no class at all. Set them on any ancestor. The reveal is mounted on the document's body, outside your component, so set what it reads on :root, on body, or on the stage part.

The parts of a hunt

CardHunt takes every key on this page: its own, and the grid's and the reveal's, which it passes down.

The parts of the grid

ScanGrid takes these. Its own root takes className.

The parts of the reveal

CardOpening takes these, and the card's parts below.

The parts of a card

Card takes these. So does CardOpening, for the card it turns over.

States

State is written on the parts as data attributes, so a selector or a Tailwind data- variant can follow it.

<CardHunt classNames={{ cell: "data-found:rounded-full data-[level='0']:opacity-40" }} {...rest} />

What to leave to the library

• Colour, type, corners, shadows, padding: yours to change on any part.
• `transform`, `opacity` and `visibility` on what moves: the flyer, the particles, the beam, the reticle, the rays. The animation writes these as inline styles and will overwrite a class.
• The card's own colour comes from the theme's rarity, through --rco-tone. Change it there and the border, the burst and the rays follow together.
• The words are labels, not styles.

Related

• Theming
• Custom card face
• CardHunt
• Labels and translation

Last updated 2026-10-11. Read this page as Markdown.