# Installation

Install `@react-wrapped/kit` for everything in one go, or pick the packages you need. All of them are released together under one version number, so they always fit each other.

## Everything

```bash
pnpm add @react-wrapped/kit gsap
```

Then load the stylesheet once, anywhere in your app:

```tsx
import "@react-wrapped/kit/styles.css";
```

## Only the parts you need

Each package depends only on the ones before it in the list on the [introduction](https://bettertyped.github.io/react-wrapped/docs/). A page that only draws charts on a stage needs two packages:

```bash
pnpm add @react-wrapped/core @react-wrapped/charts gsap
```

```tsx
import "@react-wrapped/core/styles.css";
```

Four packages have a stylesheet. Core's holds the frame, the scenes and the charts, so load it first. The player, the scan and the graphics each add their own on top:

| Package | Stylesheet |
| --- | --- |
| `@react-wrapped/core` | `@react-wrapped/core/styles.css` |
| `@react-wrapped/charts`, `scenes`, `marks` | None. What they draw is styled by core's. |
| `@react-wrapped/player` | `@react-wrapped/player/styles.css` |
| `@react-wrapped/scan` | `@react-wrapped/scan/styles.css` |
| `@react-wrapped/graphics` | `@react-wrapped/graphics/styles.css` |
| `@react-wrapped/kit` | `@react-wrapped/kit/styles.css`, all of the above in one file. |

## The font

The library ships no font file. The frame, the share card and the insight cards are set in `Inter` where the page or the machine has a font by that name, and in the system's own sans otherwise. Both look right: the scenes measure their big numbers by the ink of whatever font is in use. To get the same type on every machine, load Inter under exactly that family name, with the `@fontsource/inter` package or a rule of your own.

```css
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
}
```

The controls around the frame use the font of your page. To set the video and the controls in a typeface of your choice, set `--wr-font` on any element above them. The share card is drawn on a canvas, which cannot read the variable, so it stays in Inter or the system's sans. See [custom palette and chrome colours](https://bettertyped.github.io/react-wrapped/docs/guides/palette-and-chrome/).

## Requirements

- React 19 and React DOM 19.
- GSAP 3.13 or newer, installed by you as a peer dependency.
- No Tailwind, no CSS framework and no reset: the stylesheets bring everything the components need and stay inside their own `wr-` classes.
- A browser for anything that plays or draws. The markup itself [renders on a server](https://bettertyped.github.io/react-wrapped/docs/guides/server-rendering/).

## Related

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

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