Installation

Ce qu'est le kit

@monstera/ui est un dossier de composants React 19 en TypeScript, avec leurs feuilles CSS et les tokens générés depuis Figma. Il ne dépend que de react. Pas de Radix, pas de librairie d'animation, pas de Tailwind.

Le copier, pas l'installer

Le kit n'est pas publié sur npm : il se copie. Dans un dépôt de prototype il vit dans src/kit/, et un alias @monstera/ui pointe sur son index.ts.

{
  "compilerOptions": {
    "paths": {
      "@monstera/ui": ["./src/kit/index.ts"],
      "@monstera/ui/*": ["./src/kit/*"]
    }
  }
}

import path from "node:path";

export default {
  resolve: {
    alias: { "@monstera/ui": path.resolve(__dirname, "src/kit/index.ts") },
  },
};

L'import qui charge tout

Importer un composant charge aussi le CSS du kit, une fois : les tokens (tokens.css), la base tactile des contrôles (base.css), le respect de « réduire les animations » (motion.css) et les polices (fonts.css).

import { Button, Icon } from "@monstera/ui";

Les polices et les assets

Le kit sert Figtree, Syncopate et Cutta lui-même, sous /monstera/fonts/, ses icônes sous /monstera/icons/, et les faces de carte que CreditCard compose sous /monstera/credit-cards/ (36 Ko). Le projet hôte doit donc exposer, à la racine de son public/, un dossier monstera/ avec au moins fonts/, icons/ et credit-cards/ : la CSS du kit y pointe sans condition, quel que soit l'écran. Les autres groupes (duotone, illustrations, credit-cards-cobrand, brand-logos, images, styled, main-nav) ne voyagent que si un écran s'en sert. La galerie les liste tous.

<Icon name="credit-card" />
<img src="/monstera/images/isolation.png" alt="" />

Icon rend l'icône par un masque CSS, en currentColor : elle suit la couleur du texte et le thème sombre sans variante. Les assets multicolores passent par img et gardent leurs couleurs.

Le thème sombre

Le kit lit data-theme="dark" sur html ou sur n'importe quel ancêtre. Rien d'autre à faire : les tokens ont leurs deux valeurs.

Vérifier l'isolation

Le kit ne doit pas être redessiné par la feuille de style de son hôte, et il ne doit pas la redessiner non plus. La page lab/isolation rend les mêmes composants dans un document vierge et dans ce site, et relève toute règle étrangère qui atteint le kit.