UI-kit en blokken

Voordat je begint

Open uw gedownloade supastack-project in Visual Studio Code met behulp van Bestand → Map openen en kies vervolgens Terminal → Nieuwe terminal. De root van de repository is de map met package.json, apps en pakketten. Voer daar de onderstaande opdracht uit en laat de terminal open. Als een opdracht niet wordt herkend, voltooi dan de installatiehandleiding van het hulpprogramma voordat u verdergaat.

Lees eerst de platformtutorial. Een server is het app-proces dat browser- of telefoonverzoeken beantwoordt. Web leest apps/web-tanstack/.env.local, Expo leest apps/mobile/.env.local en opdrachten voor databasemigratie lezen root .env. De demonstratie zonder database/dashboard staat los van echte/auth-accounts, waarvoor Postgres moet worden gemigreerd. Voor een telefoon- of desktop-afrekening is een afzonderlijk draaiende web-backend nodig.

• Installeer de tools en ontvang de code
• Leer opdrachten, bestanden en configuratie
• Voltooi de eerste webtutorial

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

Setup en configuratie

packages/ui-web bevat de gedeelde productcomponenten (knoppen, inputs, kaarten, badges, dialogs, shell-onderdelen) en packages/design-tokens de tokenbron die app-theme.css naar CSS-variabelen mapt. De /kit-blocks-route mount de blokcatalogus — gecomponeerde secties die je naar je product meeneemt.

apps/mobile consumeert packages/ui-native voor de equivalente native primitives, dus oppervlakstyling blijft per platform terwijl contracten gedeeld blijven.

# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web-tanstack 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-*)

Implementatieworkflow

Composéer schermen eerst uit de gedeelde componenten; val alleen terug op een custom element als de kit het patroon niet kan uitdrukken. Nieuwe gedeelde stukken horen in ui-web met token-gedreven styling zodat elke themapack automatisch toepast.

Houd marketingcomponenten (src/marketing) buiten productoppervlakken en andersom — de twee chrome-systemen zijn bewust gescheiden.

Verificatie en probleemoplossing

Verifieer een nieuw component tegen elke density/radius/font-preset en minstens een lichte en donkere pack. Check toetsenbordfocus, layout op 320px en reduced motion; de kitgalerij op /settings/appearance is de snelste sweep.