> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# Kit UI et blocs

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

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

[Installez les outils et récupérez le code](https://supastack.dev/fr/docs/web/before-you-start.md)

[Apprendre les commandes, les fichiers et la configuration](https://supastack.dev/fr/docs/web/terminal-basics.md)

[Terminez le didacticiel Web de première exécution](https://supastack.dev/fr/docs/web/ship-in-5-minutes.md)

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


## Suivant

[Langues et textes](https://supastack.dev/fr/docs/web/i18n.md)