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

# Native UI und Theming

Screen-Primitives und geteilte View-Models, die die Design-Entscheidungen des Webs spiegeln.

## Bevor Sie beginnen

Öffnen Sie Ihr heruntergeladenes Supastack-Projekt in Visual Studio Code über Datei → Ordner öffnen und wählen Sie dann Terminal → Neues Terminal. Das Repository-Stammverzeichnis ist der Ordner, der package.json, Apps und Pakete enthält. Führen Sie dort den Befehl unten aus und lassen Sie das Terminal geöffnet. Wenn ein Befehl nicht erkannt wird, lesen Sie die Installationsanleitung für das Tool durch, bevor Sie fortfahren.

Lesen Sie zuerst das Plattform-Tutorial. Ein Server ist der App-Prozess, der Browser- oder Telefonanfragen beantwortet. Web liest apps/web/.env.local, Expo liest apps/mobile/.env.local und Datenbankmigrationsbefehle lesen root .env. Die Demonstration ohne Datenbank /Dashboard ist getrennt von echten /Auth-Konten, die migriert werden müssen Postgres. Für eine reine Telefon- oder Desktop-Kaufabwicklung ist ein separat ausgeführtes Web-Backend erforderlich.

[Installieren Sie die Tools und erhalten Sie den Code](https://supastack.dev/de/docs/web/before-you-start.md)

[Befehle, Dateien und Konfiguration lernen](https://supastack.dev/de/docs/web/terminal-basics.md)

[Schließen Sie das Tutorial zur ersten Ausführung von Mobilgeräten ab](https://supastack.dev/de/docs/mobile/ship-in-5-minutes.md)

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


## Einrichtung und Konfiguration

Screen-Primitives liegen in apps/mobile/src/ui — Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton — gestylt aus apps/mobile/src/theme, sodass eine visuelle Entscheidung fürs Web auf das native Chrome abbildet. In den Darstellungseinstellungen übernimmt der Modus „Mit Web-App abgleichen“ (apps/mobile/src/theme/synced.ts über GET/PUT /api/mobile/appearance) das synchronisierte Web-Farbpaket des angemeldeten Benutzers aus einem lokalen Cache.

packages/ui-native hält die plattformübergreifenden View-Model-Helfer: createEntitlementCard übersetzt den serverseitigen Entitlement-Status in Titel, Status, Detail, Action-Label und Accessibility-Label einer Karte, sodass Web und Mobile dieselbe Zugriffsentscheidung rendern.

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


## Implementierungsablauf

Komponiere Screens zuerst aus den geteilten Primitives, bevor du neue Elemente schreibst; halte dich an die Tokens und Dichte des Theme-Moduls statt Größen und Farben hartzucodieren.

Halte Produkt-Copy aus den Primitives heraus — sie rendern Labels, keine Copy-Entscheidungen. Führe Accessibility-Labels in eigenen Zeilen so mit wie createEntitlementCard.


## Überprüfung und Fehlerbehebung

Verifiziere einen Screen in Hell und Dunkel, bei größter Textgröße, mit Screenreader-Labels und auf einem kleinen Gerät. Eine Komponente, die bei 200% Text abschneidet oder clippt, ist nicht fertig.


## Weiter

[Mobile Berechtigungen](https://supastack.dev/de/docs/mobile/entitlements.md)