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

# UI native et thèmes

Primitives d'écran et view-models partagés qui reflètent les décisions de design du web.

## 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 de première exécution sur mobile](https://supastack.dev/fr/docs/mobile/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/mobile start
```


## Configuration et paramètres

Les primitives d’écran vivent dans apps/mobile/src/ui — Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton — stylisées depuis apps/mobile/src/theme, de sorte qu’une décision visuelle prise pour le web se transpose sur l’interface native. Dans les réglages d’Apparence, le mode « Suivre l’application web » (apps/mobile/src/theme/synced.ts via GET/PUT /api/mobile/appearance) applique le pack de couleurs web synchronisé de l’utilisateur connecté à partir d’un cache local.

packages/ui-native porte les helpers de view-model cross-plateforme : createEntitlementCard transforme l'état de droit côté serveur en titre, statut, détail, label d'action et label d'accessibilité d'une carte, pour que web et mobile rendent la même décision d'accès.

```
apps/mobile/src/ui/screen.tsx exports:
  Screen, Card, H1, H2, Title, Detail,
  SectionLabel, ErrorText, AppButton

@supastack/ui-native → createEntitlementCard(input)
  → { title, status, detail, accessibilityLabel, action }
```


## Processus d’implémentation

Composez les écrans depuis les primitives partagées avant d'écrire de nouveaux éléments ; alignez-vous sur les tokens et la densité du module de thème plutôt que de coder tailles et couleurs en dur.

Gardez la copy produit hors des primitives — elles rendent des labels, pas des décisions éditoriales. Faites voyager les labels d'accessibilité dans les lignes custom comme le fait createEntitlementCard.


## Vérification et dépannage

Vérifiez un écran en clair et sombre, à la plus grande taille de texte, avec les labels de lecteur d'écran et sur un petit appareil. Un composant qui tronque ou clippe à 200% de texte n'est pas terminé.


## Suivant

[Droits d’accès mobiles](https://supastack.dev/fr/docs/mobile/entitlements.md)