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 /de/docs/web/ui-kit.md (or send Accept: text/markdown).
UI-Kit und Blöcke
Geteilte Komponenten, Design-Tokens und der Block-Katalog.
Bevor Sie beginnen
Öffnen Sie Ihr heruntergeladenes Supastack-Projekt in Visual Studio Code über Datei → Ordner öffnen und wählen Sie dann Terminal → Neues Terminal. Das Repository-Stammverzeichnis ist der Ordner, der package.json, Apps und Pakete enthält. Führen Sie dort den Befehl unten aus und lassen Sie das Terminal geöffnet. Wenn ein Befehl nicht erkannt wird, lesen Sie die Installationsanleitung für das Tool durch, bevor Sie fortfahren.
Lesen Sie zuerst das Plattform-Tutorial. Ein Server ist der App-Prozess, der Browser- oder Telefonanfragen beantwortet. Web liest apps/web/.env.local, Expo liest apps/mobile/.env.local und Datenbankmigrationsbefehle lesen root .env. Die Demonstration ohne Datenbank /Dashboard ist getrennt von echten /Auth-Konten, die migriert werden müssen Postgres. Für eine reine Telefon- oder Desktop-Kaufabwicklung ist ein separat ausgeführtes Web-Backend erforderlich.
- Installieren Sie die Tools und erhalten Sie den Code
- Befehle, Dateien und Konfiguration lernen
- Schließen Sie das Web-Tutorial zur ersten Ausführung ab
corepack pnpm --filter @supastack/web devEinrichtung und Konfiguration
packages/ui-web hält die geteilten Produkt-Komponenten (Buttons, Inputs, Cards, Badges, Dialogs, Shell-Teile) und packages/design-tokens die Token-Quelle, die app-theme.css in CSS-Variablen mappt. Die /kit-blocks-Route mountet den Block-Katalog — komponierte Sektionen, die du in dein Produkt heben kannst.
apps/mobile konsumiert packages/ui-native für die äquivalenten nativen Primitive, sodass Surface-Styling pro Plattform bleibt, während Verträge geteilt werden.
# 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-*)Implementierungsablauf
Komponiere Screens zuerst aus den geteilten Komponenten; greife zu einem Custom-Element nur, wenn das Kit das Pattern nicht ausdrücken kann. Neue geteilte Teile gehören mit token-getriebenem Styling in ui-web, damit jedes Theme-Pack automatisch greift.
Halte Marketing-Komponenten (src/marketing) aus Produkt-Surfaces heraus und umgekehrt — die beiden Chrome-Systeme sind bewusst getrennt.
Überprüfung und Fehlerbehebung
Verifiziere eine neue Komponente gegen jedes Density-/Radius-/Font-Preset und mindestens ein Light- und ein Dark-Pack. Prüfe Keyboard-Fokus, 320px-Layout und Reduced Motion; die Kit-Galerie unter /settings/appearance ist der schnellste Sweep.