Documentation

Getting Started

Installez @brickslab./ui-web dans votre projet React en quelques minutes. La librairie est publiée sur le registre public npm, sous le scope d'organisation @brickslab..

01Prérequis

Assurez-vous d'avoir les éléments suivants dans votre projet avant de continuer.

React>= 19

react-dom>= 19

TypeScriptrecommandé

Node.js>= 18

02Installer les packages

Installez la librairie de composants et le thème par défaut (tokens CSS). Utilisez npm avec --legacy-peer-deps pour éviter les conflits de peers.

npm (recommandé)

bash

npm install --legacy-peer-deps
npm install @brickslab./ui-web@2.1.5 @brickslab./theme-default@2.0.1 --legacy-peer-deps

03Importer les tokens CSS

Les composants utilisent des variables CSS (--color-fg, --c-surface, --radius-md…). Importez le fichier de tokens dans votre layout racine ou votre CSS global.

Next.js — app/layout.tsx

app/layout.tsx

import "@brickslab./theme-default/dist/tokens.css";

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

Vite / CRA — main.tsx

main.tsx

import "@brickslab./theme-default/dist/tokens.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

CSS global uniquement

globals.css

@import "@brickslab./theme-default/dist/tokens.css";

Le thème expose aussi un mode sombre via [data-theme="dark"]. Appliquez cet attribut sur <html> pour activer le mode sombre.

04Utiliser un composant

Importez n'importe quel composant directement depuis @brickslab./ui-web. Tous les composants sont tree-shakeable — seuls ceux que vous importez sont inclus dans votre bundle.

MyComponent.tsx

import React from "react";
import { Button, Badge, Callout } from "@brickslab./ui-web";

export function MyComponent() {
  return (
    <div>
      <Callout variant="info" title="Brickslab">
        Design system prêt pour la production.
      </Callout>

      <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
        <Button variant="primary">Commencer</Button>
        <Button variant="secondary">En savoir plus</Button>
      </div>

      <div style={{ display: "flex", gap: 6, marginTop: 12 }}>
        <Badge variant="success">Stable</Badge>
        <Badge variant="info">TypeScript</Badge>
      </div>
    </div>
  );
}

05Autocomplétion TypeScript

Tous les composants exportent leurs types. Vous pouvez importer les types manuellement si nécessaire.

tsx

import { Button, type ButtonProps } from "@brickslab./ui-web";

// Les types sont disponibles pour l'autocomplétion
const MyButton = (props: ButtonProps) => <Button {...props} />;

Aucune configuration TypeScript supplémentaire n'est requise — les types sont inclus dans le package via dist/index.d.ts.

06Mettre à jour la librairie

Pour maintenir votre projet à jour, mettez à niveau @brickslab./ui-web en même temps que @brickslab./theme-default. Vérifiez d'abord la version publiée, puis appliquez la mise à jour.

Vérifier puis mettre à jour

# Voir les dernières versions publiées
npm view @brickslab./ui-web version
npm view @brickslab./theme-default version

# Mettre à jour vers la dernière version
npm install @brickslab./ui-web@latest @brickslab./theme-default@latest --legacy-peer-deps

# Ou mettre à jour vers des versions précises (recommandé en production)
npm install @brickslab./ui-web@2.1.5 @brickslab./theme-default@2.0.1 --legacy-peer-deps

Après une mise à jour, relancez vos checks (npm run build, tests, lint) et vérifiez les notes de version avant de déployer.

Prochaines étapes

Parcourir le catalogue

Tous les composants disponibles avec démos interactives.

→

Theme Builder

Personnalisez les tokens CSS pour adapter le design à votre identité.

→

Résultats d'audit

Scores de qualité par composant sur 8 axes (a11y, API, perf…).

→