CardPack

CardPack is the pack opening card games are known for. A sealed pack floats until it is pressed, bursts, and deals its cards face down on a table. A card glows in its tier's colour under the pointer, which is the tease, and turns over when it is pressed, in any order. Done gathers them into a row.

Usage

import { useOpenedCards } from "@react-cards-opening/core";
import { CardPack } from "@react-cards-opening/ui";
import "@react-cards-opening/ui/styles.css";

function Pack({ cards }) {
  const { opened, open } = useOpenedCards("pack:42");
  return <CardPack cards={cards} opened={opened} onOpen={open} />;
}

cards is the pack, in the order it is dealt, and each card names its tier in rarity. What is in the pack is decided before it is opened: deal it with rollCards on your server and the tearing is only the show.

How it lays the table

• Five cards sit in a ring, one at the top, the layout a pack of five is known by. Any other count sits in rows. Up to ten sit well.
• The table is measured against the pack's own width, with a container query, so a pack in a sidebar lays itself out like one on a phone: two or three to a row.
• A card moves by changing two numbers. Gathering them on Done is the same cards with new seats, and the stylesheet glides them there.

What each tier does

Every card throws sparks as it turns. A loud tier opens rays behind itself and jolts the table. A legendary lights the whole table. On top of that each tier plays its signature show, and effects swaps it for a set or a plan of your own.

import { CardPack, EFFECT_SETS } from "@react-cards-opening/ui";

<CardPack cards={cards} opened={opened} onOpen={open} effects={EFFECT_SETS.radiant} />;

Props

Parts and variables

Without the component

The rules are useCardPack in the core package: sealed, dealt, done, and which cards are up. Draw the table yourself and keep the rules.

Related

• useCardPack
• Effect plans
• CardSpin
• CardCase
• Styling by hand

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