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

Componenti condivisi, design token e il catalogo dei blocchi.

## 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 sul Web](https://supastack.dev/it/docs/web/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/web dev
```


## Installazione e configurazione

packages/ui-web contiene i componenti di prodotto condivisi (pulsanti, input, card, badge, dialog, parti di shell) e packages/design-tokens la sorgente di token che app-theme.css mappa in variabili CSS. La route /kit-blocks monta il catalogo dei blocchi — sezioni composte che puoi portare nel tuo prodotto.

apps/mobile consuma packages/ui-native per i primitivi nativi equivalenti, così lo styling delle superfici resta per piattaforma mentre i contratti restano condivisi.

```
# 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-*)
```


## Flusso di implementazione

Componi le schermate prima dai componenti condivisi; ricorri a un elemento custom solo quando il kit non può esprimere il pattern. I nuovi pezzi condivisi appartengono a ui-web con styling guidato dai token così ogni pack tema si applica automaticamente.

Mantieni i componenti marketing (src/marketing) fuori dalle superfici di prodotto e viceversa — i due sistemi di chrome sono intenzionalmente separati.


## Verifica e risoluzione dei problemi

Verifica un nuovo componente contro ogni preset di densità/raggio/font e almeno un pack chiaro e uno scuro. Controlla il focus da tastiera, il layout a 320px e la reduced motion; la galleria del kit su /settings/appearance è la scansione più rapida.


## Successivo

[Lingue e testi](https://supastack.dev/it/docs/web/i18n.md)