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

pnpm add @react-wrapped/kit gsap

Then load the stylesheet once, anywhere in your app:

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. A page that only draws charts on a stage needs two packages:

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

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:

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.

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

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.

Related

• Your first Wrapped
• Introduction
• Theming
• Server rendering

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