> ## 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 nativa e temi

Primitivi di schermata e view-model condivisi che rispecchiano le decisioni di design del web.

## Prima di iniziare

Apri il progetto supastack scaricato in Visual Studio Code utilizzando File → Apri cartella, quindi scegli Terminale → Nuovo terminale. La radice del repository è la cartella contenente package.json, app e pacchetti. Esegui il comando qui sotto e lascia il suo terminale aperto. Se un comando non viene riconosciuto, completare la guida all'installazione dello strumento prima di continuare.

Leggi prima il tutorial sulla piattaforma. Un server è il processo dell'app che risponde alle richieste del browser o del telefono. Il Web legge apps/web/.env.local, Expo legge apps/mobile/.env.local e i comandi di migrazione del database leggono root .env. La dimostrazione senza database/dashboard è separata dagli account reali/auth, che necessitano della migrazione Postgres. Un pagamento solo telefonico o desktop richiede un backend Web eseguito separatamente.

[Installa gli strumenti e ottieni il codice](https://supastack.dev/it/docs/web/before-you-start.md)

[Impara comandi, file e configurazione](https://supastack.dev/it/docs/web/terminal-basics.md)

[Completa il tutorial di prima esecuzione su dispositivi mobili](https://supastack.dev/it/docs/mobile/ship-in-5-minutes.md)

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


## Installazione e configurazione

Le primitive di schermata risiedono in apps/mobile/src/ui — Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton — stilizzate da apps/mobile/src/theme, così una scelta visiva fatta per il web si riflette sull’interfaccia nativa. Nelle impostazioni di Aspetto, la modalità «Segui app web» (apps/mobile/src/theme/synced.ts tramite GET/PUT /api/mobile/appearance) applica il pacchetto di colori web sincronizzato dell’utente autenticato da una cache locale.

packages/ui-native porta gli helper view-model cross-piattaforma: createEntitlementCard trasforma lo stato di entitlement del server in titolo, stato, dettaglio, etichetta dell'azione ed etichetta di accessibilità di una card, così web e mobile renderizzano la stessa decisione di accesso.

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


## Flusso di implementazione

Componi le schermate dai primitivi condivisi prima di scrivere elementi nuovi; rispetta i token e la densità del modulo tema invece di hardcodare dimensioni e colori.

Tieni la copy di prodotto fuori dai primitivi — renderizzano etichette, non decisioni di copy. Porta le etichette di accessibilità attraverso le righe custom come fa createEntitlementCard.


## Verifica e risoluzione dei problemi

Verifica una schermata in chiaro e scuro, alla dimensione massima del testo, con label per screen reader e su un dispositivo piccolo. Un componente che tronca o taglia al 200% del testo non è finito.


## Successivo

[Entitlement mobile](https://supastack.dev/it/docs/mobile/entitlements.md)