# 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`

```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. |

> GSAP is free for every use, commercial included, but its licence is its own and not MIT. This library's code is MIT.

## 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](https://bettertyped.github.io/react-cards-opening/docs/guides/server-rendering/) has the details.

## Related

- [Your first opening](https://bettertyped.github.io/react-cards-opening/docs/first-opening/)
- [Theming](https://bettertyped.github.io/react-cards-opening/docs/theming/)
- [Server rendering](https://bettertyped.github.io/react-cards-opening/docs/guides/server-rendering/)
- [Introduction](https://bettertyped.github.io/react-cards-opening/docs/)

Source: https://bettertyped.github.io/react-cards-opening/docs/installation/