Naar inhoud gaan
supastack
Blader door de docs
WebNext.js

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 /nl/docs/web/ui-kit.md (or send Accept: text/markdown).

UI-kit en blokken

Gedeelde componenten, design tokens en de blokcatalogus.

Vraag over deze handleiding
Openen in

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/.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.

corepack pnpm --filter @supastack/web 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 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.

Veelgestelde vragen

14 vragen

Wat is supastack?

supastack is een modulair fundament voor het bouwen van SaaS-producten met AI. Het brengt gemeenschappelijke infrastructuur samen zodat jij je kunt richten op productspecifieke functies.

Ondersteunt het web en mobiel?

Ja. supastack bevat Next.js- en Expo-apps als startpunten voor web- en mobiele ervaringen.

Welke authenticatie is inbegrepen?

Better Auth dekt e-mail/wachtwoord, OTP en sociale login. Persoonlijke workspaces worden bij het account geprovisioneerd zodat productrecords vanaf dag één afgebakend blijven.

Hoe ondersteunt het AI?

supastack bevat configureerbare multi-provider AI, usage-tracking, budgetten en versleutelde bring-your-own-key-ondersteuning.

Hoe worden abonnementen afgehandeld?

Voor producten op de kit vormen Stripe-billing, abonnementen en entitlements het fundament voor betaalde toegang. Providersecrets blijven server-only.

Waar leeft mijn productspecifieke code?

Productspecifieke functies blijven in een aparte codebase terwijl het product de fundamentmodules van supastack configureert en integreert.

Hoe werkt de prijs van supastack?

De kit is een eenmalige aankoop met lifetime updates: One Framework voor $249 (tijdelijke lanceringsprijs — $100 korting op de normale prijs van $349) of All Frameworks (Next.js, iOS, Android) voor $499 (tijdelijke lanceringsprijs — $100 korting op de normale prijs van $599), plus $75 per extra developer seat. Geen kit-abonnement. Checkout op deze site levert je licentiesleutel per e-mail, met repositorytoegang via een GitHub-uitnodiging.

Hoe bakens workspaces mijn data af?

Records van gebruikers worden afgebakend per workspaceId. Identiteit, entitlements, AI-gebruik, billing-events en auditentries blijven binnen de grens van de persoonlijke workspace.

Hoe werken achtergrondjobs?

Trigger.dev is de expliciete jobruntime. Het JobRunner-contract belooft alleen enqueue, status en cancel — workflowsemantiek blijft Trigger.dev-specifiek en expliciet.

Hoe verschilt e-mail van outreach?

Transactionele e-mail dekt productworkflows zoals voltooiingsnotices. Koude outreach en campagnes zijn productzaken buiten de e-mailmodule van deze kit.

Hoe werken mobiele aankopen?

Mobiel bevat native aankopen en herstel via RevenueCat, met toegang die je server verifieert. Configureer de winkelaccounts en rond apparaattests af vóór publicatie. Webfacturatie blijft afzonderlijk.

Waar leven de AI-providerkeys?

Bring-your-own-key-credentials zijn versleuteld en blijven server-only. Keys worden uit logs gefilterd; gebruik en budgetten blijven zichtbaar op workspaceniveau.

Welke betaalmethoden accepteert de checkout?

De door Stripe gehoste checkout accepteert kaarten en kan ook Alipay en WeChat Pay aanbieden zodra die wallets op het Stripe-account zijn geactiveerd — handig voor kopers in China. Wallet-autorisaties worden asynchroon bevestigd, dus de licentiepagina wordt bijgewerkt zodra de betaling is afgerond.

Kan ik een terugbetaling krijgen?

Zodra je toegang hebt gekregen tot de repository, is supastack voor altijd van jou en kan er dus geen terugbetaling plaatsvinden. Maar wees gerust: je krijgt de volledige broncode met levenslange updates om onbeperkt producten voor jezelf of je klanten te bouwen en te lanceren. Je mag de code alleen niet doorverkopen of de repository herdistribueren als starterkit of template.

NL
Thema