Installation

trc-ui s'installe en une commande et fonctionne avec React 18 ou plus récent : Next.js, Vite, ou tout autre outil.

Installer le paquet

npm install trc-ui

Le paquet ne dépend que de react et react-dom. Il fournit ses composants en ESM et en CommonJS, ses types TypeScript, et une feuille de style unique.

Importer les styles

Importez la feuille de style une seule fois, à la racine de l'application, puis posez la classe trc sur <body> : elle donne le fond quasi noir, la couleur du texte et la police.

import "trc-ui/styles.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="trc">{children}</body>
    </html>
  );
}

Charger la police

Les titres fins reposent sur Montserrat (graisses 300, 400 et 500). La police n'est pas incluse dans le paquet : chargez-la, puis indiquez-la à trc-ui avec la variable --trc-font.

import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ subsets: ["latin"], weight: ["300", "400", "500"], variable: "--font-montserrat" });

// <html className={montserrat.variable}>

:root {
  --trc-font: var(--font-montserrat), ui-sans-serif, system-ui, sans-serif;
}

Sans Next.js, une balise Google Fonts suffit ; trc-ui utilise alors « Montserrat » par défaut.

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet" />

Premier composant

import { Heading, PillButton, Text } from "trc-ui";

export function Welcome() {
  return (
    <section>
      <Heading as="h1" size="display">Bienvenue en *noir profond.*</Heading>
      <Text size="lg">Le passage entre astérisques prend la couleur d'accent.</Text>
      <PillButton solid>Commencer</PillButton>
    </section>
  );
}

Avec un routeur

Les liens acceptent le composant de lien de votre routeur : as sur PillLink et Card, linkAs sur SiteHeader et SiteFooter.

import Link from "next/link";
import { PillLink, SiteHeader } from "trc-ui";

<PillLink as={Link} href="/tarifs">Voir les tarifs</PillLink>
<SiteHeader linkAs={Link} logo={<Logo />} logoLabel="Accueil" nav={nav} />

Les composants interactifs portent déjà la directive "use client" : ils s'utilisent tels quels dans l'App Router de Next.js.