Installation

Installing react-cards-opening is two packages, one peer dependency and one stylesheet. A third package, the effects, comes with ui. The packages are always released together under one version number, so what you install was tested together.

Install

bash

pnpm add @react-cards-opening/ui @react-cards-opening/core gsap

With npm that is npm install @react-cards-opening/ui @react-cards-opening/core gsap, and the same names work with yarn and bun. GSAP is a peer dependency: there is one copy of it on the page, yours.

Import the stylesheet

main.tsx

import "@react-cards-opening/ui/styles.css";

Once, anywhere above the components. Every class in it starts with rco-, and it only styles elements the library renders, so it cannot change your page. It needs no Tailwind, no reset and no build plugin.

Requirements

Needs	Version	Why
React	18 or 19	Hooks and `useSyncExternalStore`.
GSAP	3.13 or newer	The reveal is a GSAP timeline. Only the core, no plugins.
A browser from 2023 on		`color-mix()`, the `translate` property and container query units.

Only the rules

If you draw the reveal yourself, core on its own is enough. It depends on React and nothing else: no GSAP, no stylesheet.

bash

pnpm add @react-cards-opening/core

With a server renderer

Both packages render on a server without touching window, and the overlay mounts after hydration. In an app with server components, the hooks and the components that open cards go in a client component. Server rendering has the details.

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