For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /fr/docs/web/ui-kit.md (or send Accept: text/markdown).

Kit UI et blocs

Composants partagés, design tokens et catalogue de blocs.

Poser une question sur ce guide

Avant de commencer

Ouvrez votre projet supastack téléchargé dans Visual Studio Code en utilisant Fichier → Ouvrir le dossier, puis choisissez Terminal → Nouveau terminal. La racine du référentiel est le dossier contenant package.json, les applications et les packages. Exécutez la commande ci-dessous et laissez son terminal ouvert. Si une commande n'est pas reconnue, terminez le guide d'installation de l'outil avant de continuer.

Lisez d’abord le didacticiel de la plateforme. Un serveur est le processus d'application qui répond aux requêtes du navigateur ou du téléphone. Le Web lit apps/web/.env.local, Expo lit apps/mobile/.env.local et les commandes de migration de base de données lisent root .env. La démonstration sans base de données/tableau de bord est distincte des comptes réels/auth, qui nécessitent une migration Postgres. Un paiement sur téléphone ou sur ordinateur uniquement nécessite un backend Web exécuté séparément.

corepack pnpm --filter @supastack/web dev

Configuration et paramètres

packages/ui-web contient les composants produit partagés (boutons, champs, cartes, badges, dialogues, pièces de shell) et packages/design-tokens la source de tokens que app-theme.css mappe en variables CSS. La route /kit-blocks monte le catalogue de blocs — des sections composées que vous pouvez reprendre dans votre produit.

apps/mobile consomme packages/ui-native pour les primitifs natifs équivalents, donc le style des surfaces reste par plateforme tandis que les contrats restent partagés.

# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser

# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)

Processus d’implémentation

Composez les écrans d'abord depuis les composants partagés ; ne recourez à un élément custom que quand le kit ne peut pas exprimer le motif. Les nouvelles pièces partagées appartiennent à ui-web avec un styling piloté par tokens pour que chaque pack de thème s'applique automatiquement.

Gardez les composants marketing (src/marketing) hors des surfaces produit et inversement — les deux systèmes de chrome sont volontairement séparés.

Vérification et dépannage

Vérifiez un nouveau composant contre chaque preset de densité/rayon/police et au moins un pack clair et un sombre. Contrôlez le focus clavier, le layout à 320px et la reduced motion ; la galerie du kit sur /settings/appearance est le balayage le plus rapide.