For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /it/docs/web/ui-kit.md (or send Accept: text/markdown).

Kit UI e blocchi

Componenti condivisi, design token e il catalogo dei blocchi.

Chiedi informazioni su questa guida

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.

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.